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

@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');
        }
        });
        });
        });

Новые блоги и статьи Все статьи Все блоги /
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .
Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .