Rozbalovací mobilní menu

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.

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: '\4c';
    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: '\4d';
}
.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

• https://divi.space/wordpress-and-divi-code-snippets/collapse-submenus/