Blog

DIVI – rozbalovací menu

Kvě 21, 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: '\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>

Videonávod

Toto vše najdete popsané na jejich videu:
 

Co si ještě přečíst?

Zajímavosti z projektů

Jak změnit wp-login URL

Občas je zajímavé podívat se, kdo na Váš web chodí a hlavně - kam. Např. pluginy jako Wordfence a...

Bezvýpadkové nasazení webu

O co vlastně jde Ne vždy má člověk štěstí na to, aby dělal nový web od základu a občas je potřeba...

HTML & CSS

Ikony v menu WordPressu

Kolikrát se stalo, že člověk dal do menu externí odkaz (tj. odkaz, který po kliknutí nevedl na...

Mega menu bez pluginu

Poslední dobou čím dál častěji potkávám tzv. "Mega-menu", tedy podmenu, které je přes celou šířku...

WooCommerce