Работа с меню. При клике на кнопке меню или вне его, меню должно закрываться

@Danzel · Регистрация: 21.08.2012

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

Добрый вечер! Изучаю JQuery. Вот ради развития решил написать меню, практически такое же как на Хабре.
Два дня ломаю голову над тем, как объединить два метода в один. Суть в том чтоб при клике на кнопку меню или при клике вне области меню, меню должно закрываться.

По отдельности это сделать получилось, а вот объединить не получается.

Код HTML

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<section class="content">
        <div class="container">
            <div class="wrapper_menu">
                <div id="navbar_overlay" class="overlay hidden"></div>
                <div class="left_menu">
                    <a href="#" id="top_nav"><span class="fa fa-bars fa-5x" id="menu-icon"></a>
                </div>
                
                <div class="menu_tab " >
                    <div class="sub_menu" id="sub_menu">
                            <div class="title">Разделы</div>
                            <form class="search_sub">
                                <input type="text" name="search" placeholder="Search..">
                            </form>
                            <hr/>
                    </div>  
                </div>
            </div>
                
        </div>
    </section>

Код JQ

JavaScript
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
26
27
        $(".left_menu").click(function() {
            
            $('.menu_tab').toggle();
            var docHeight = $(document).height();
            $("body").append("<div id='overlay'></div>");
            $("#overlay")
                .height(docHeight)
                .css({
                     'opacity' : 0.4,
                     'position': 'absolute',
                     'top': 0,
                     'left': 0,
                     'background-color': 'black',
                     'width': '100%',
                     'z-index': 5000
                }); 
        });
        $(document).on('click', function(e) {
            if (!$(e.target).closest(".wrapper_menu").length) {
                $('.menu_tab').hide();
                $("#overlay").remove();
 
                
            }
            return false;
            e.stopPropagation();
        });

Так же прилагаю сам архив, со всеми файлами.

Буду признателен за помощь в написании кода или же за помощь в продумывании логики)).

@sad67man · 19.08.2016, 12:56

Danzel,

CSS
1
2
3
4
5
6
7
8
9
#navbar_overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(0,0,0,.55);
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('.menu_tab').click(function(e){
    e.stopPropagation()
});
 
$(".left_menu").click(function(e) {
    if(!$('.menu_tab').is(":visible")){
        $('.menu_tab').show();
        $("#navbar_overlay").removeClass("hidden")
        e.stopPropagation();
        $(document).one("click", function(){
            $('.menu_tab').hide();
            $("#navbar_overlay").addClass("hidden");
        })
    }
})

@Danzel · 19.08.2016, 15:59 **[ТС]**

sad67man,

Огромное спасибо, как раз то, что нужно.

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

Вот код JQ, если кому - то вдруг станет интересно:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('.menu_tab').click(function(e){
    e.stopPropagation();
});
 
$(".left_menu").click(function(e) {
    if(!$('.menu_tab').is(":visible")){
        $('.menu_tab').show();
        $("#navbar_overlay").removeClass("hidden")
        e.stopPropagation();
        $(document).one("click", function(){
            $('.menu_tab').hide();
            $("#navbar_overlay").addClass("hidden");
             return false;
         })
         return false;  
    }
})

@sad67man · 19.08.2016, 16:16

Danzel, Ну да. вверх прыгает из-за того, что срабатывает ссылка '#'.
В принципе return false генерирует e.stopPropagation(); и e.eventDefault();
Так что e.stopPropagation(); внутри функции .left_menu можно убрать.
Ну или наоборот добавить e.preventDefault();

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$(".left_menu").click(function(e) {
    e.preventDefault();
    if(!$('.menu_tab').is(":visible")){
        $('.menu_tab').show();
        $("#navbar_overlay").removeClass("hidden")
        e.stopPropagation();
        $(document).one("click", function(){
            $('.menu_tab').hide();
            $("#navbar_overlay").addClass("hidden");
        })
    }
})

Ну или убрать ссылку "#". Вместо нее можно написать к примеру "javascript:void(0)". В общем вариантов масса. Даже не знаешь какой лучше)

@Danzel · 19.08.2016, 16:34 **[ТС]**

sad67man,

Спасибо, возьму на вооружение)

По поводу "javascript:void(0)" - впервые вижу), так что надо о ней почитать).
Еще раз спасибо за такую оперативную помощь))

@sad67man · 19.08.2016, 16:43

Danzel, javascript код можно вставлять куда угодно, хоть в ссылку, хоть в адресную строку. void(0) - это пустое действие, которое ничего не делает. Заглушка "#", на самом деле это якорная ссылка на сам документ. Некоторые вместо "#" пишут "javascript:" Либо "javascript:void(0)";
В вашем случае можно вообще тег a убрать, вместо него поставить div или span, а в стилях добавить свойство
cursor:pointer;, чтоб изменялся курсор при наведении.

Новые блоги и статьи Все статьи Все блоги /
Циклы for в Python py-thonny 17.03.2025 Существует множество ситуаций, когда нам нужно выполнить одно и то же действие несколько раз. Цикл for в Python — настоящий рабочий конь для большинства программистов. Если вам нужно пройтись по всем. . .	Предсказание ветвлений - путь к высокопроизводительному C++ NullReferenced 17.03.2025 В высокопроизводительном программировании на C++ каждый такт процессора на счету. Когда речь заходит о разработке систем с низкой задержкой — будь то высокочастотная торговля, обработка потоковых. . .	Паттерн CQRS в C# UnmanagedCoder 17.03.2025 Создание сложных корпоративных приложений часто требует нестандартных подходов к архитектуре. Один из таких подходов — паттерн CQRS (Command Query Responsibility Segregation), предлагающий простую,. . .	Паттерн Цепочка ответственности в C# UnmanagedCoder 17.03.2025 Цепочка ответственности — это поведенческий паттерн проектирования, который позволяет передавать запросы последовательно по цепочке потенциальных обработчиков, пока один из них не обработает запрос. . . .	Создаем микросервисы с NestJS, TCP и Typescript run.dev 17.03.2025 NestJS — фреймворк, который значительно упрощает создание серверных приложений на Node. js. Его прелесть в том, что он комбинирует концепции ООП, функционального программирования и предлагает. . .
Гексагональная архитектура со Spring Boot Javaican 17.03.2025 Если вы когда-нибудь сталкивались с ситуацией, когда внесение простых изменений в базу данных или пользовательский интерфейс заставляло вас переписывать весь код, то вы точно оцените элегантность. . .	Позиционирование Kafka Consumer и Seek-операции Javaican 17.03.2025 Что же такое Consumer Seek в Kafka? По сути, это API-метод, который позволяет программно указать, с какой позиции (offset) Consumer должен начать или продолжить чтение данных из партиции. Без этого. . .	Python NumPy: Лучшие практики и примеры py-thonny 17.03.2025 NumPy (Numerical Python) — одна из ключевых библиотек для научных вычислений в Python. Она превращает Python из просто удобного языка общего назначения в среду для проведения сложных математических. . .	Java Micronaut в Docker: контейнеризация с Maven и Jib Javaican 16.03.2025 Когда речь заходит о микросервисной архитектуре на Java, фреймворк Micronaut выделяется среди конкурентов. Он создан с учётом особенностей облачных сред и контейнеров, что делает его идеальным. . .	Управление зависимостями в Java: Сравнение Spring, Guice и Dagger 2 Javaican 16.03.2025 Инъекция зависимостей (Dependency Injection, DI) — один из фундаментальных паттернов проектирования, который радикально меняет подход к созданию гибких и тестируемых Java-приложений. Суть этого. . .

@Danzel 6 / 6 / 5 Регистрация: 21.08.2012 Сообщений: 45
	19.08.2016, 16:34 [ТС]	5
	sad67man, Спасибо, возьму на вооружение) По поводу "javascript:void(0)" - впервые вижу), так что надо о ней почитать). Еще раз спасибо за такую оперативную помощь)) 0

@sad67man 2408 / 1405 / 663 Регистрация: 23.08.2015 Сообщений: 3,539
	19.08.2016, 16:43	6
	Danzel, javascript код можно вставлять куда угодно, хоть в ссылку, хоть в адресную строку. void(0) - это пустое действие, которое ничего не делает. Заглушка "#", на самом деле это якорная ссылка на сам документ. Некоторые вместо "#" пишут "javascript:" Либо "javascript:void(0)"; В вашем случае можно вообще тег a убрать, вместо него поставить div или span, а в стилях добавить свойство `cursor:pointer;`, чтоб изменялся курсор при наведении. 0

Опции темы

Работа с меню. При клике на кнопке меню или вне его, меню должно закрываться

Решение