Опубликовано: 10 декабря 2015
Настроить более тонко боковое меню категорий
У меня длинное меню и большое дерево категорий. Когда посетитель переходит по категориям иногда приходиться пользоваться скроллом вниз, но нужно следить чтобы мышка была наведена на меню, если сдвинуть ее в сторону меню исчезает.
Мне нужно найти настройки скрипта где можно выставить задержку закрытия меню.
Комментарии (3)
Появление и скрытие подпунктов меню реализовано с помощью CSS. Использованы свойства:
С их помощью можно получить эффект задержки появления меню, но обратный эффект(задержка исчезания) получить не удастся в силу того что свойство transition не применяется к свойствам с нечисловыми параметрами.
Попробуйте использовать другой тип меню.
Я то думал, что меню реализовано на javascript, а это чистый css?
Другой тип меню мне не подходит из-за большого уровня вложенности.
Один вариант показывает не все уровни, а "аккордеон" распахивается как простыня. А вот обычное меню оно самое.
Задержка появления используется только для первого уровня вложенности. Можно отменить ее работу и заставить меню появляться при помощи скрипта. Шаблон открыт на редактирование - вы вольны изменить логику работы любого блока, под ваши нужды.
Отменить появление с помощью СSS:
@media only screen and (min-width: 993px) { ul.base-menu.type1 > li > ul { display: none; visibility: visibility; opacity: 1; } ul.base-menu.type1 > li:hover > ul { transition: opacity 0s; } }далее пишем скрипт:
$('ul.base-menu.type1 > li > ul').css('display', 'none'); $('ul.base-menu.type1 > li').hover(function(){ clearTimeout($(this).data('timer-close')); var self = $(this); self.data('timer', setTimeout(function(){ self.find('ul:first').css('display', 'block'); }, 300)); }, function(){ clearTimeout($(this).data('timer')); var self = $(this); self.data('timer-close', setTimeout(function(){ self.find('ul:first').css('display', 'none'); }, 500)); });*может не работать, приведено для примера, скорее всего потребуется адаптация под определенные условия.
CSS код и правда отключает первый уровень (и дальше), а скрипт я разместил в файл index.html перед закрывающим тэгом </head> но ничего не происходит.
Оборачивание кода в тэг {literal} {/literal} также не срабатывает.
Может я не туда вставляю js а может это и правда "демо-код" :)
Попробуйте эту часть кода заменить:
так:
Увы, так тоже не помогает.
Но было бы отлично включить доработку меню в обновление так как если тестировать это меню при настройке: "Список" и у меня большая высота и уровень вложенности им очень сложно пользоваться. При перемотке вниз меню исчезает мгновенно.
Я понимаю, что реализация меню на чистом CSS значительно ускоряет загрузку страниц, но извините навигационное меню один из важных элементов магазина и если у него юзабилити плохое о чем может идти речь?