Меню Каталог

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

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

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

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

trainracing M
Аватара
trainracing M
Возраст: 31
Репутация: 13
Сообщения: 121
Зарегистрирован: 07.10.2016
С нами: 7 лет 5 месяцев
Сайт

Сообщение #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 M
makki M
Репутация: 199
Сообщения: 697
Зарегистрирован: 12.08.2016
С нами: 7 лет 7 месяцев
Откуда: Киев
Сайт

Сообщение #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_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');
        });
    });

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

makki M
makki M
Репутация: 199
Сообщения: 697
Зарегистрирован: 12.08.2016
С нами: 7 лет 7 месяцев
Откуда: Киев
Сайт

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

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

Исправил инструкцию выше.
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)

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

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

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

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

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

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

makki M
makki M
Репутация: 199
Сообщения: 697
Зарегистрирован: 12.08.2016
С нами: 7 лет 7 месяцев
Откуда: Киев
Сайт

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

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

Евгений M
Евгений M
Возраст: 37
Репутация: 4
Сообщения: 86
Зарегистрирован: 15.12.2018
С нами: 5 лет 3 месяца
Откуда: Киев

Сообщение #8 Евгений » 10.09.2019, 00:33

В мобильной версии дважды появляется иконка меню, которую необходимо дважды открывать.
Capture.PNG
Capture.PNG (2.98 КБ) 4853 просмотра

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

makki M
makki M
Репутация: 199
Сообщения: 697
Зарегистрирован: 12.08.2016
С нами: 7 лет 7 месяцев
Откуда: Киев
Сайт

Сообщение #9 makki » 22.09.2019, 20:22

Евгений писал(а):В мобильной версии дважды появляется иконка меню, которую необходимо дважды открывать.
Исправил инструкцию выше.
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)

Евгений M
Евгений M
Возраст: 37
Репутация: 4
Сообщения: 86
Зарегистрирован: 15.12.2018
С нами: 5 лет 3 месяца
Откуда: Киев

Сообщение #10 Евгений » 23.09.2019, 06:27

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

makki M
makki M
Репутация: 199
Сообщения: 697
Зарегистрирован: 12.08.2016
С нами: 7 лет 7 месяцев
Откуда: Киев
Сайт

Сообщение #11 makki » 23.09.2019, 07:05

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

тут это обсуждалось
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)

Dysha-Kuzbass M
Аватара
Dysha-Kuzbass M
Возраст: 37
Репутация: 3
Сообщения: 155
Зарегистрирован: 17.05.2017
С нами: 6 лет 10 месяцев
Откуда: Кузбасс
ВКонтакте

Сообщение #12 Dysha-Kuzbass » 27.01.2021, 21:51

А как для 3.8.1 это реализовать? Т.е., при наведении курсора меню появлялось, а при отвода его (курсора) исчезало!


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

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


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

   

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

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

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