Webové zákusky

Rozbalovací mobilní menu

21. 5. 2022

U větších webů to zažil asi každý z nás – pokud je struktura menu košatá, pak se na mobilních zařízeních může stát, že bude menu hooodně dlouhé. A protože DIVI v základu zobrazí všechny položky pod sebou, je třeba najít způsob, jak ho to naučit.

Pozn.: DIVI sice umí jednoduché tzv. mega-menu, ale to náš problém neřeší na mobilních zařízeních.

Jsou dvě možnosti, jak toto řešit:

  1. Menu prostorově omezit, aby bylo samo o sobě scrolovací (hodí se hlavně v případě, kdy je tzv. „sticky“ – přilepené nahoře). O tom jsem psala v tomto článku.
  2. Udělat menu ztv. collapsible, tedy jako rozbalovací, tedy položky podmenu schovat a nechat na uživateli, aby si ji zobrazil.

Collapsible menu

Našla jsem několik variant, jak toto řešit, nakonec ta nejlépe funkční pochází z webu divi.space. Samozřejmě nabízí i variantu s pluginem, ovšem toto je pořád tak jednochá věc, že se dá udělat ručně a bez něj.

collapsible menu before
Menu, když je celé rozbalené
collapsible menu after
Rozbalovací menu se schvanými podmenu

CSS

Náslující kód stačí vložit mezi vlastní CSS:

(Kód nastavuje styl a chování zobrazení a schování tzv. „submenus“, a také přidává ikony „+“ a „-„, které se zobrazí, pokud je menu rozbalené nebo zavřené.)

/* collapsible menu BEGIN */
.et_pb_menu .et_mobile_menu .menu-item-has-children > a,
#main-header .et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    position: relative;
}
.et_pb_menu .et_mobile_menu .menu-item-has-children > a:after, #main-header .et_mobile_menu .menu-item-has-children > a:after {
    font-family: 'ETmodules';
    text-align: center;
    speak: none;
    font-weight: 600;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    font-size: 18px;
    content: 'c';
    top: 11px;
    right: 13px;
}
.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a:after,
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after {
    content: 'd';
}
.et_pb_menu .et_mobile_menu ul.sub-menu,
#main-header .et_mobile_menu ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    transition: all 1.5s ease-in-out;
}
.et_pb_menu .et_mobile_menu li.visible > ul.sub-menu,
#main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l #main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li.visible > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
}
/* collapsible menu END */

Javascript

Kód je třeba vložit do všech stránek webu (DIVI -> Theme options -> Integration).

(Kód nastavuje tzv. „on-click“ chování, když uživatel klikne na ikonu „+“ a „-“ – přiřadí správnou CSS třídu prvku v menu, aby se sbalil nebo rozbalil.)

<script>
// DIVI collapsible menu
// https://divi.space/wordpress-and-divi-code-snippets/collapse-submenus/

jQuery(document).ready(function($){
    function ds_setup_collapsible_submenus() {
        var $menu = $('.et_mobile_menu'),
        top_level_link = '.et_mobile_menu .menu-item-has-children > a';
        
        $menu.find('a').each(function() {
            $(this).off('click');
            if ( $(this).is(top_level_link) ) {
                $(this).attr('href', '#');
            }
            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } 
            else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            }
        });
    }
    setTimeout(function() {
        ds_setup_collapsible_submenus();
    }, 700);
 });
</script>

Zdroje

Další články

Ninja forms – co se hodí vědět

Ninja Forms je skvělý plugin pro formuláře. A to hned z několika důvodů: Skvělý drag&drop editoraria atributy, což je skvělé pro přístupnost webu,umí ukládat odpovědi, zvládne poslat tolik...

WooCommerce – změna textu tlačítka

Tzv. "Tlačítková novela" s sebou přináší pro e-shopy řadu změn a jednou z nich je změna textu tlačítka v posledním kroku nákupu (tak novela dostala svůj název). A kdo je připraven - není překvapen. Jak takové tlačítko přejmenovat?