Адаптивное меню, закрытие при клике

@makey2 · Регистрация: 20.04.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Не программист по образованию и потому сложности в понимании как нужно правильно сделать...
Прошу помочь с меню. Цель такая чтобы при разрешении экрана меньше 800px при клике по ссылке меню сворачивалось в исходное состояние (навигация по одной странице без перехода).

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    $(function() {
    var pull = $('#pull');
    menu = $('nav ul');
    menuHeight = menu.height();
    $(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
 
var w = $(window).width();
if(w < 800 ) {
$('.clearfix ul li a').click(function() {
 menu.slideToggle();
});
}
});
    $(window).resize(function(){
    var w = $(window).width();
    if(w > 320 && menu.is(':hidden')) {
    menu.removeAttr('style');
        }
        });
        });

HTML5
1
2
3
4
5
6
<nav class="clearfix">
 <ul class="clearfix">
 <li><a href="#prise">ссылка1</a></li>
 <li><a href="#preim">ссылка2</a></li>
 <li><a href="#shema">ссылка3</a></li>
 </ul>

Проблема в том что первый раз отрабатывается как нужно, но вот второй и третий раз клик по ссылкам начинается цикличное открытие и закрытие menu, а при переходе к большему разрешению чем 800px, меню (со всеми ссылками) остается скрытым. Знающие люди, подскажите пожалуйста

...

@kposs · 27.04.2017, 00:08

попробуйте так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    $(function() {
    var pull = $('#pull');
    menu = $('nav ul');
    menuHeight = menu.height();
    $(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
 
$('.clearfix ul li a').click(function() {
 menu.slideToggle();
}
});
    $(window).resize(function(){
    var w = $(window).width();
    if(w > 320 && menu.is(':hidden')) {
    menu.removeAttr('style');
        }
        });
        });

@makey2 · 27.04.2017, 09:20 **[ТС]**

В этом коде, что Вы привели, строка 12 подсвечивается. Перенес ее ниже. Но проблема закрытия остается. Только еще добавилось, что на полном экране ссылки меню после перехода мигают. Дело в том что меню фиксировано сверху и это заметно.
При разрешении меньше 765px первый раз получается переход по ссылке и меню сворачивается, но если снова перейти по другой или той же ссылке, то меню сначала свернется и затем снова разворачивается и остается открытым до клика по #pull.

Приведу полный код:

HTML5
1
2
3
4
5
6
7
8
 <nav class="clearfix">
 <ul class="clearfix">
 <li><a href="#prise">Цены</a></li>
 <li><a href="#preim">Преимущества</a></li>
 <li><a href="#shema">Схема работы</a></li>
 <li><a href="#otz">Отзывы</a></li>
 </ul>
 <a href="#" id="pull">Меню</a> </nav>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@charset "utf-8";.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
.clearfix{background-color:rgb(36,36,36)}
nav{height:40px;width:100%;font-size:11pt;position:relative}
nav ul{padding:0;margin:0 auto;height:40px}
nav li{display:inline;float:left}
nav a{color:#fff;display:inline-block;text-align:center;text-decoration:none;line-height:40px;text-shadow:1px 1px 0 #283744;padding:0 15px}
nav li a{border-right:1px solid #444343;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
nav li:last-child a{border-right:0}
nav a:hover,nav a:active{background-color:#8c99a4}
nav a#pull{display:none}
@media screen and (max-width:765px){nav{height:auto}
nav ul{width:100%;display:block;height:auto}
nav li{width:50%;float:left;position:relative}
nav li a{border-bottom:1px solid #576979;border-right:1px solid #576979}
nav a{text-align:left;width:100%;text-indent:25px}
}
@media only screen and (max-width:765px){nav{border-bottom:0}
nav ul{display:none;height:auto}
nav a#pull{display:block;background-color:#b70000;width:100%;position:relative}
nav a#pull:after{content:"";background:url('http://rembit-service.ru/images/nav-icon.png') no-repeat;width:30px;height:30px;display:inline-block;position:absolute;right:15px;top:10px}
}
@media only screen and (max-width:360px){nav li{display:block;float:none;width:100%}
nav li a{border-bottom:1px solid #5f5f5f}
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function() {
    var pull = $('#pull');
    menu = $('nav ul');
    menuHeight = menu.height();
    $(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
 
var w = $(window).width();
if(w < 765 ) {
$('.clearfix ul li a').click(function() {
 menu.slideToggle();
});
}
 
    $(window).resize(function(){   
    if(w > 320 && menu.is(':hidden')) {
    menu.removeAttr('style');
        }
        });
        });
        });

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

Опции темы