Настраиваем красивое меню типа гамбургер на мобильных, используя плагин mmenu. На примере 1С-Битрикс
Опубликовано: 13.07.2018
Основная возникшая сложность, это настроить меню с активной панелью на страницах подкатегорий разных уровней вложенности. Но обо всём по порядку.
В работе меню можно посмотреть на сайте decor-of-today.com
1. Подключаем css и js. Эти файлы стилей и скриптов берите на сайте плагина mmenu , подключайте сначала стили, а уже ниже скрипты js. Библиотека jquery у меня уже подключена в Битриксе, если вы устанавливаете mmenu на другой CMS, значит проверьте, чтобы она тоже была подключена.
<link rel="stylesheet" href="/bitrix/templates/eshop_bootstrap_green/hamburgers.css" /> <link rel="stylesheet" href="/bitrix/templates/eshop_bootstrap_green/jquery.mmenu.all.css" /> <?$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/jquery-3.1.1.min.js');?> <script src="/bitrix/templates/eshop_bootstrap_green/jquery.mmenu.all.js"></script> <script src="/bitrix/templates/eshop_bootstrap_green/jquery.mhead.js"></script>
2. Дальше html. Вот как у меня:
<p id="burgerMenu"><a class="mh-hamburger" href="#menu"></a></p> <nav id="menu"> <ul id="panel-menu"> <?$APPLICATION->IncludeComponent( "decor:menu", "horizontal_multilevel_mob", array( "ROOT_MENU_TYPE" => "left", "MENU_CACHE_TYPE" => "A", "MENU_CACHE_TIME" => "36000000", "MENU_CACHE_USE_GROUPS" => "Y", "MENU_THEME" => "site", "CACHE_SELECTED_ITEMS" => "N", "MENU_CACHE_GET_VARS" => array( ), "MAX_LEVEL" => "4", "CHILD_MENU_TYPE" => "left", "USE_EXT" => "Y", "DELAY" => "N", "ALLOW_MULTI_SELECT" => "N", "COMPONENT_TEMPLATE" => "horizontal_multilevel_mob", "COMPOSITE_FRAME_MODE" => "A", "COMPOSITE_FRAME_TYPE" => "AUTO" ), false );?> <li class="forMobile user"> <? if($USER->IsAuthorized()) { echo('<a href="/personal/?backurl=%2F">вернуться назад</a>'); echo('<a href="/?logout=yes">выйти</a>'); } else { echo('<a href="/login/?login=yes&backurl=%2F">войти</a>'); echo('<a href="/login/?register=yes&backurl=%2F" >зарегистрироваться</a>'); } ?> </li> <li class="forMobile social mm-nolistview"> <a href="https://www.instagram.com/decor_of_today/" target="_blank"><i class="fa fa-instagram fa-2x"></i></a> <a href="https://www.facebook.com/DECOR-of-TODAY-991989530892134/" target="_blank"><i class="fa fa-facebook fa-2x"></i></a> <a href="http://vk.com/public121718715" target="_blank"><i class="fa fa-vk fa-2x"></i></a> <a href="https://ru.pinterest.com/decor_of_today/" target="_blank"><i class="fa fa-pinterest fa-2x"></i></a> </li> </ul><!-- /#menuCatalog --> </nav>Здесь ссылка a href="#menu" указывает на идентификатор меню. Дальше идёт битриксовый компонент меню. Но в простом виде это выглядит просто как ненумерованный список пунктов меню.
3. И чтобы это дело ожило и заработало, надо прописать javascript. В теле страницы или в отдельном файле добавим:
<script> $(function() { $("#menu").mmenu({ navbar: { title: "Decor of today" }, extensions: ["fx-menu-slide",], }, { }); $(".mh-head.mm-sticky").mhead({ scroll: { hide: 200 } }); $(".mh-head:not(.mm-sticky)").mhead({ scroll: false }); $("#menu .item-selected").parents(".mm-panel").removeClass("mm-hidden").addClass("mm-opened mm-panel_opened"); $("#panel-menu").removeClass("mm-panel_opened").addClass("mm-panel_opened-parent mm-hidden"); var api = $("#menu").data( "mmenu" ); api.bind( "close:finish", function( $panel ) { //$("#panel-menu").removeClass("mm-panel_opened-parent mm-hidden").addClass("mm-panel_opened"); }); api.bind( "open:finish", function( $panel ) { $("#panel-menu").removeClass("mm-panel_opened mm-hidden").addClass("mm-panel_opened-parent"); //$("#menu .mm-opened").removeClass("mm-opened"); //$("#menu .item-selected").parents(".mm-panel").addClass("mm-opened mm-panel_opened"); }); }); </script>
Здесь строка
$("#menu").mmenu({...подключает плагин меню. В параметрах меня заголовок меню на название сайта. Закомментированные строки просто удалите - это плоды настройки вложенных подменю. Я добивался, чтобы на внутренних страницах сайта это меню было раскрыто на соответствующей панели submenu.
Может кто-то найдёт более лаконичное решение. Тогда поделитесь им.