Home » Featured » Multi-level push menu

Multi-level push menu

Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites. We tried to explore the possibility of creating a nested multi-level menu, something that could be quite useful for menus with lots of content (like navigations of online stores). The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.Please note that we are using 3D Transforms which only work in modern browsers.

bb1

HTML

We are using the following nested structure for the menu:

<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
    <div class="mp-level">
        <h2 class="icon icon-world">All Categories</h2>
        <ul>
            <li class="icon icon-arrow-left">
                <a class="icon icon-display" href="#">Devices</a>
                 
                <div class="mp-level">
                    <h2 class="icon icon-display">Devices</h2>
                    <ul>
                        <li class="icon icon-arrow-left">
                            <a class="icon icon-phone" href="#">Mobile Phones</a>
 
                            <div class="mp-level">
                                <h2>Mobile Phones</h2>
                                <ul>
                                    <li><a href="#">Super Smart Phone</a></li>
                                    <li><a href="#">Thin Magic Mobile</a></li>
                                    <li><a href="#">Performance Crusher</a></li>
                                    <li><a href="#">Futuristic Experience</a></li>
                                </ul>
                            </div>
 
                        </li>
                        <li class="icon icon-arrow-left">
                            <!-- ... -->
                        </li>
                        <li class="icon icon-arrow-left">
                            <!-- ... -->
                        </li>
                    </ul>
                </div>
            </li>
            <li><!-- ... --></li>
            <!-- ... -->
        </ul>
    </div>
</nav>
<!-- /mp-menu -->

…where each level is wrapped into a division with the class mp-level.

Normally, we would have used fixed positioning for a menu of this kind but since there is quite an peculiar “problem” with that (transforms will make it behave like an absolute positioned element), we’ll have to use absolute positioning which will leave us with some unwanted behavior of the site (scrolling of menu and dependence of document height). So we’ve used a little trick to avoid the menu being scrollable or to be cut off if the site’s content is too short by using the following page structure:

<div class="container">
    <!-- Push Wrapper -->
    <div class="mp-pusher" id="mp-pusher">
 
        <!-- mp-menu -->
        <nav id="mp-menu" class="mp-menu">
            <!-- ... -->
        </nav>
        <!-- /mp-menu -->
 
        <div class="scroller"><!-- this is for emulating position fixed of the nav -->
            <div class="scroller-inner">
                <!-- site content goes here -->
                </div>
            </div><!-- /scroller-inner -->
        </div><!-- /scroller -->
 
    </div><!-- /pusher -->
</div><!-- /container -->

CSS

Where we set the following styles for the elements:

html, 
body, 
.container,
.scroller {
    height: 100%;
}
 
.scroller {
    overflow-y: scroll;
}
 
.scroller,
.scroller-inner {
    position: relative;
}
 
.container {
    position: relative;
    overflow: hidden;
    background: #34495e;
}

This will allow the content to be scrolled when the menu is closed and it will also make the menu being 100% of the window height. Basically, we are emulating what fixed positioning would do here.

This is how the plugin can be called:

new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );

Or, if the submenus should cover the previous levels:

new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ), {
    type : 'cover'
} );

We hope you enjoy this menu and find it useful.

Demo Download

Tags :
Uzabila

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

Scroll To Top