Страница 1 из 1

Меню Каталог

Добавлено: 02.12.2017, 14:13
slava
Подскажите пожалуйста как дефолтном шаблоне реализовать.
1. Что бы Меню Каталог закрывался при клике вне меню.
или
2. Что бы Меню Каталог открывался при наведении курсора мыши и закрывался при наведении вне меню.

Добавлено: 25.04.2018, 06:58
trainracing
Подскажите, делаю так:

Код: Выделить всё

 // Выпадающие блоки
  $('.fn_switch .c_menu').hover(function(e){
        e.preventDefault();

        $(this).parent().next().slideToggle(300);

        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        }
        else {
            $(this).addClass('active');
        }
    });


Блок вылазит при наведении, но пункты меню сразу обратно сворачиваются.
Какой код добавить, чтобы при наведении на каталог меню было активно?

Добавлено: 25.04.2018, 12:21
makki
slava писал(а):Подскажите пожалуйста как дефолтном шаблоне реализовать.
1. Что бы Меню Каталог закрывался при клике вне меню.
Тут эта задача обсуждалась и там же есть решение
или
2. Что бы Меню Каталог открывался при наведении курсора мыши и закрывался при наведении вне меню.

Чтобы меню закрывалось и открывалось при наведении, нужно сделать следующее

1) В файле index.tpl
1.1) в строке

Код: Выделить всё

<div class="header_bottom">

добавляем дополнительный класс fn_menu_up, чтобы получилось так:

Код: Выделить всё

<div class="header_bottom fn_menu_up">

1.2) Чуть ниже вместо

Код: Выделить всё

<div class="categories_heading fn_switch">
                    {include file="svg.tpl" svgId="menu_icon"}
                    <span class="small-hidden" data-language="index_categories">{$lang->index_categories}</span>
                </div>

пишем

Код: Выделить всё

<div class="categories_heading fn_menu_down tablet-hidden">
                    {include file="svg.tpl" svgId="menu_icon"}
                    <span class="small-hidden" data-language="index_categories">{$lang->index_categories}</span>
                </div>
                <div class="categories_heading fn_switch lg-hidden">
                    {include file="svg.tpl" svgId="menu_icon"}
                    <span class="small-hidden" data-language="index_categories">{$lang->index_categories}</span>
                </div>

2) В файле okay.js
например после следующей функции

Код: Выделить всё

    // Выпадающие блоки
    $('.fn_switch').click(function(e){ .... });

добавляем

Код: Выделить всё

/* Главное меню на десктопе */
    $('.fn_menu_down').mouseenter(function() {
        var menu = $(this);
        timer = setTimeout(function() {
            menu.parent().find('.categories_nav').slideDown(300);
            menu.addClass('active');
        }, 300);
        $('.fn_menu_up').mouseleave(function () {
            clearTimeout(timer);
            $(this).find('.categories_nav').slideUp(300);
            $(this).find('.categories_heading').removeClass('active');
            $(this).off('mouseleave');
        });
    });

Работоспособность проверена. Учтены все замечания и пожелания

Добавлено: 22.08.2018, 13:08
makki
Маленькое приятное дополнение к вышеуказанному дополнению (открывание меню при наведении мышки). Теперь при наведении мышки, меню не спешит сразу открываться, а только после небольшой паузы. Если за это время мышка убрана, меню не открывается. Это убирает неприятное дергание меню, если вдруг мышка оказалась на объекте.

Исправил инструкцию выше.

Добавлено: 10.02.2019, 06:52
Robox
Спасибо большое! То, что доктор прописал! Уже давно задумывался над данной реализацией, но знаний не хватает. Еще раз спасибо!

Добавлено: 15.02.2019, 09:24
s74464491
В мобильной версии не закриваеться меню

Добавлено: 08.04.2019, 19:10
makki
s74464491 писал(а):В мобильной версии не закриваеться меню
Исправил инструкцию.

Добавлено: 10.09.2019, 00:33
Евгений
В мобильной версии дважды появляется иконка меню, которую необходимо дважды открывать.
Capture.PNG
Capture.PNG (2.98 КБ) 4854 просмотра

Подскажите пожалуйста как подправить

Добавлено: 22.09.2019, 20:22
makki
Евгений писал(а):В мобильной версии дважды появляется иконка меню, которую необходимо дважды открывать.
Исправил инструкцию выше.

Добавлено: 23.09.2019, 06:27
Евгений
Спасибо большое, так гораздо лучше! Заметил, что в мобильной версии перестал закрываться каталог при клике вне него. Не подскажите как вернуть обратно эту функцию?

Добавлено: 23.09.2019, 07:05
makki
Евгений писал(а):Заметил, что в мобильной версии перестал закрываться каталог при клике вне него.
А он и не закрывался. Такого нет изначально в движке. А эта доработка это не решает

тут это обсуждалось

Добавлено: 27.01.2021, 21:51
Dysha-Kuzbass
А как для 3.8.1 это реализовать? Т.е., при наведении курсора меню появлялось, а при отвода его (курсора) исчезало!