Menus

Les différents menus cssmenu

Cette page a une structure spécifique de manière à afficher tous les types de menus de navigation en fonction des emplacements potentiels susceptibles d'être utilisés.

Pour qu'un menu de navigation s'affiche dans un emplacement, il faut y déclarer au moins un mini module.
Si rien n'est déclaré dans un emplacement, aucun menu n'y apparait.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit odio urna, blandit pharetra elit scelerisque tempor. Nulla dapibus felis orci, at consectetur orci auctor eget. Donec eros lectus, mollis eget auctor vel, convallis ac mauris. Cras imperdiet, erat ac semper volutpat, libero orci varius mi, et ullamcorper quam urna vitae augue. Maecenas maximus vitae diam vel porta. Pellentesque dignissim dolor eu neque aliquet viverra. Maecenas tincidunt, mi non gravida tincidunt, lectus elit gravida massa, sed viverra tortor diam pretium metus. In hac habitasse platea dictumst. Ut velit turpis, sollicitudin non risus et, pretium efficitur leo. Integer elementum faucibus finibus. Nullam et felis sit amet felis blandit iaculis. Vestibulum massa arcu, finibus id enim ac, commodo aliquam metus. Vestibulum feugiat urna nunc, et eleifend velit posuere ac. Vestibulum sagittis tempus nunc, sit amet dignissim ipsum sollicitudin eget.

Voir le code source :

// cssmenu
<nav id="menu-[ID]" class="cssmenu"> // cssmenu-horizontal cssmenu-vertical cssmenu-static cssmenu-left cssmenu-right cssmenu-with-submenu
    <ul class="level-0">
        <li class="has-sub">
            <a class="cssmenu-title" href="#"><span>Element</span></a>
            <ul>
                <li><a href="#" class="cssmenu-title"><span>Element</span></a></li>
                ...
            </ul>
        </li>
        <li>
            <a class="cssmenu-title" href="#"><span>Element</span></a>
        </li>
        ...
    </ul>
</nav>
<script>jQuery("#menu-[ID]").menumaker({ title: "menu-[TITLE]", format: "multitoggle", breakpoint: 768 });</script> // static: true
 
// Pushmenu
<a class="toggle-[ID] pushmenu-toggle">
    <span>[TITLE]</span>
</a>
<nav id="pushmenu-[ID]" class="pushnav">
    <ul class="level-0">
        <li class="has-sub">
            <a class="cssmenu-title" href="#"><span>Element</span></a>
            <ul>
                <li><a href="#" class="cssmenu-title"><span>Element</span></a></li>
                ...
            </ul>
        </li>
        <li>
            <a class="cssmenu-title" href="#"><span>Element</span></a>
        </li>
        ...
    </ul>
</nav>
<script>
    jQuery('#pushmenu-[ID]').pushmenu({
        customToggle: jQuery('.toggle-[ID]'), // null
        navTitle: '[TITLE]', // null
        pushContent: '[PUSHED_CONTENT]', // container pushed (body, #id_container, or whatever)
        position: '[PUSHMENU_OPENING]', // left, right, top, bottom
        levelOpen: [PUSHMENU_EXPANDING], // 'overlap', 'expand', false
        levelTitles: true, // overlap only
        levelSpacing: 40, // px - overlap only
        navClass: 'pushmenu-nav-[ID]',
        disableBody: [DISABLED_BODY],
        closeOnClick: true, // if disableBody is true
        insertClose: true,
        labelClose: 'Fermer',
        insertBack: true,
        labelBack: 'Retour'
    });
</script>