Вложенные пункты меню в два ряда
Меню в 2 ряда очень удобное и функциональное, потому что посетителю сайта, где применяется данный скрипт, не придется долго искать необходимый ему пункт меню.
Поиск максимально упрощается за счет того, что все подразделы сайта уместятся в окно монитора посетителя в несколько рядов и ему не придется дополнительно проворачивать страницу вниз, чтобы найти нужную информацию.
Как известно, сегодня основная политика успешного сайта должна быть направлена на то, чтобы максимально упростить навигацию по подразделам для посетителей, заходящих с любого устройства. Бесконечно длинные списки, как и неудобная структура сайта, могут оттолкнуть ваших потенциальных клиентов. Наличие скрипта «Меню в 2 ряда» поможет вам привлечь и удержать новых посетителей, которым хочется срезу увидеть всю информацию о ваших услугах или ассортименте товара.
И если же ваши пункты меню не помещаются под разрешение вашего экрана, как на приведенном примере: скриншот. то это решение создано специально для вас.
Установка
Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
// меню в две строки для в вложенных
require(['jquery'], function($){
$('body').on('mouseenter', '.ul-w-mainmenu-have-nasted', function(){
var mvd_nasted = $(this).find('.ul-w-mainmenu-nested:eq(0)');
var mvd_th_height = mvd_nasted.innerHeight(), // Высота вложенного
mvd_th_top = mvd_nasted.offset().top, // расстояние до потолка
mvd_th_ht = mvd_th_height+mvd_th_top, // Общее расстояние
mvd_window_h = $(window).height(); // Расстояние окна
if(mvd_window_h < mvd_th_ht){
var mvd_new_h = (mvd_window_h-mvd_th_top)-40,
mvd_new_wch = mvd_nasted.children().innerWidth(),
mvd_new_w = mvd_new_wch*2;
mvd_nasted.css({
'max-height': ''+mvd_new_h+'px',
'min-width': ''+mvd_new_w+'px'
});
mvd_nasted.find('.ul-w-mainmenu-item').css({
'width': ''+mvd_new_wch+'px',
'float': 'left'
});
}
});
$('body').on('mouseleave', '.ul-w-mainmenu-have-nasted', function(){
var mvd_nasted = $(this).find('.ul-w-mainmenu-nested:eq(0)');
mvd_nasted.css({
'max-height': '',
'min-width': ''
});
});
});
</script>
Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.
0
