Меню Каталог

Правила раздела: faq.php?mode=okay
Модератор: Модераторы

slava
slava
Репутация: 1
Сообщения: 1
Зарегистрирован: 02.12.2017
С нами: 1 год 4 месяца

Сообщение #1 slava » 02.12.2017, 14:13

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

trainracing M
Аватара
trainracing M
Возраст: 27
Репутация: 7
Сообщения: 99
Зарегистрирован: 07.10.2016
С нами: 2 года 6 месяцев
Сайт

Сообщение #2 trainracing » 25.04.2018, 06:58

Подскажите, делаю так:

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

 // Выпадающие блоки
  $('.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');
        }
    });


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

makki
makki
Репутация: 147
Сообщения: 413
Зарегистрирован: 12.08.2016
С нами: 2 года 8 месяцев
Откуда: Киев
Сайт Skype

Сообщение #3 makki » 25.04.2018, 12:21

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_switch lg-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_menu_down tablet-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.next().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');
        });
    });

Работоспособность проверена. Учтены все замечания и пожелания
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS

makki
makki
Репутация: 147
Сообщения: 413
Зарегистрирован: 12.08.2016
С нами: 2 года 8 месяцев
Откуда: Киев
Сайт Skype

Сообщение #4 makki » 22.08.2018, 13:08

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

Исправил инструкцию выше.
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS

Robox M
Robox M
Возраст: 36
Репутация: 1
Сообщения: 6
Зарегистрирован: 02.02.2019
С нами: 2 месяца 21 день
Откуда: Симферополь
Сайт

Сообщение #5 Robox » 10.02.2019, 06:52

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

s74464491
s74464491
Репутация: 1
Сообщения: 1
Зарегистрирован: 15.02.2019
С нами: 2 месяца 7 дней

Сообщение #6 s74464491 » 15.02.2019, 09:24

В мобильной версии не закриваеться меню

makki
makki
Репутация: 147
Сообщения: 413
Зарегистрирован: 12.08.2016
С нами: 2 года 8 месяцев
Откуда: Киев
Сайт Skype

Сообщение #7 makki » 08.04.2019, 19:10

s74464491 писал(а):В мобильной версии не закриваеться меню
Исправил инструкцию.
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS


Название раздела: Вопросы по работе с OkayCMS
Правила раздела: faq.php?mode=okay

Быстрый ответ


Введите код в точности так, как вы его видите. Регистр символов не имеет значения.
Код подтверждения

   

Вернуться в «Вопросы по работе с OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 1 гость