Настраиваем красивое меню типа гамбургер на мобильных, используя плагин 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&amp;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.

Может кто-то найдёт более лаконичное решение. Тогда поделитесь им.