Настраиваем красивое меню типа гамбургер на мобильных, используя плагин mmenu. На примере 1С-Битрикс

Меню-гамбургер на основе mmenu
Основная возникшая сложность, это настроить меню с активной панелью на страницах подкатегорий разных уровней вложенности. Но обо всём по порядку.
В работе меню можно посмотреть на сайте 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.
Может кто-то найдёт более лаконичное решение. Тогда поделитесь им.

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- 0 Composer – пакетный менеджер PHP. Что и как? (13.01.2022)
- 0 MySQL и PHP: Вычисление возраста (количество лет) по дате рождения (20.06.2017)
- 0 Yii: Bootstrap tabs, делаем активной вкладку на которую выполняется переход по ссылке (20.03.2014)
- 0 CodeIgniter: Всплывающая форма обратной связи на Ajax в Bootstrap Modal и проверкой Captcha (18.02.2014)
- 0 Как изменить часовой пояс на сервере (16.11.2013)
- 0 PHP: Как удалить файлы по маске? (07.11.2013)
- 0 Регулярные выражения в PHP (12.04.2014)
- 0 Opencart: Модуль Filter Product OpenCart_v1.5.x: Как скрывать недоступные опции в фильтре (23.10.2013)
- 0 Защита от спама в phpBB3 без капчи (09.10.2013)
- 0 Php функция implode внутри запроса SELECT к MySQL. (02.09.2013)
- 0 Как убрать папку www из денвера? (22.03.2013)
- 0 Устанавливаем и настраиваем WampServer (аналог MAMP в Mac и возможная замена Denwer'у) на Windows (22.03.2013)
- 0 Полезные возможности PhpStorm и настройка горячих клавиш (14.03.2013)
- 0 WordPress: Добавить ссылку "Сохранить фото" для галереи на NextGen с эффектом Lightbox (12.04.2013)
- Асинхронная загрузка css (21.01.2021)
- Оборачиваем изображения в ссылки с помощью хука add_filter('the_content', ...) в functions.php (14.08.2019)
- Добавляем форму отправки обратного звонка на сайт (по Javascript и с ReCaptcha) (29.07.2019)
- Преимущества ИТ–аутсорсинга (25.03.2019)
- Отладка PHP кода в консоли браузера (22.03.2019)
- Как добавить на 1С Битрикс ссылку canonical? (15.03.2019)
- Ошибка в phpmyadmin: count(): Parameter must be an array or an object that implements Countable (27.03.2019)
- Java-скрипт работа с css-свойствами (09.03.2019)
- Битрикс шпаргалка (16.04.2019)
- Добавляем дополнительные поля в разделе. Пользовательские свойства (01.03.2019)
- Битрикс: проверка залогинен ли пользователь как Админ. (01.03.2019)
