Navigation menu

All the cssmenu menus

This page has a specific structure to display all kind of links menus regarding to all places they can be setted.

To see a navigation menu in a menu location, at least one mini module must be declared in it.

If nothing is declared in a place you won't see any menu in it.

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.

See the source code : 
// 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: 'Close',
        insertBack: true,
        labelBack: 'Back'
    });
</script>