Multi-Level Push Menu

10/28/2020 Multi-Level Push Menu
Multi-Level Push Menu

An experimental push menu with multi-level functionality that allows
endless nesting of navigation elements.
By Mary Lou in Playground on August 13, 2013
View demo Download Source

Codrops uses cookies for its advertisement solutions and for analytics. We hope you're ok with this, but you
can opt-out if you wish. Read our Privacy Policy and Cookie Policy. OK
https://tympanus.net/codrops/2013/08/13/multi-level-push-menu/ 1/7
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 like the one by David Bushell. 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.
Working with nested structures is quite tricky because when we, for example,
move the parent then all children will of course move as well. So we are using a
couple of tricks that will maintain the right 3D translates for the sub-menus and
their children. The main idea is to increment the value for the translate so that we
guarantee that the sub-levels are not shown once we push everything a bit more
for showing the slices of the parents. This is of course not necessary in the case
where the sub-menu is covering the parent menu.
Please note that we are using 3D Transforms which only work in modern
browsers. You will find a fallback example for non-supporting browsers in the
end of the component.css file where we simply show the first level menu. The
same we do for the no JS case.
We are using the following nested structure for the 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>
<h2 class="icon icon-display">Devices</h2>
<ul>
<a class="icon icon-phone" href="#">Mobile Phon
<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></
</ul>
</div>
</li>

</li>

</li>
</ul>
</div>
</li>
<li></li>

</ul>
</div>
</nav>

…where each level is wrapped into a division with the class mp-level.
Normally, wecookies
Codrops uses wouldfor
have used fixed positioning
its advertisement foranalytics.
solutions and for a menu We of this
hopekind
you'rebut
ok since
with this, but you
there is quite an
canpeculiar “problem”
opt-out if you with
wish. Read ourthat (transforms
Privacy Policy andwill make
Cookie it behave
Policy. OK 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">

<div class="mp-pusher" id="mp-pusher">


<nav id="mp-menu" class="mp-menu">

</nav>

<div class="scroller">
</div>
</div>
</div>

</div>
Where we set the following styles for the elements:
html,
body,
.container,
.scroller {
Codrops height:
uses cookies for its advertisement solutions and for analytics. We hope you're ok with this, but you
100%;
} can opt-out if you wish. Read our Privacy Policy and Cookie Policy. OK
.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' ), documen
Or, if the submenus should cover the previous levels:

new mlPushMenu( document.getElementById( 'mp-menu' ), documen
type : 'cover'
} );
For the demos we are using the beautiful Linicons iconfont by Sergey Shmidt
created with the help of the IcoMoon app.
We hope you enjoy this menu and find it useful.
Find this project on Github
Mary Lou
ML is a freelance web designer and developer with a passion

for interaction design. She studied Cognitive Science and
Computational Logic and has a weakness for the smell of
freshly ground peppercorns.
http://www.codrops.com
Twitter Dribbble Instagram Github
How to Build an Case Study: Chang Liu Draggable Menu with
Underwater-Style Portfolio V4 Image Grid Previews
Navigation Using PixiJS

Multi-Level Push Menu

Uploaded by

Copyright:

Available Formats

Multi-Level Push Menu

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Multi-Level Push Menu

Uploaded by

Copyright:

Available Formats

10/28/2020 Multi-Level Push Menu

Multi-Level Push Menu

By Mary Lou in Playground on August 13, 2013

View demo Download Source

We are using the following nested structure for the menu:

<div class="scroller"><!-- this is for emulating position

</div>

Where we set the following styles for the elements:

This is how the plugin can be called:

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

Or, if the submenus should cover the previous levels:

We hope you enjoy this menu and find it useful.

Find this project on Github

ML is a freelance web designer and developer with a passion

Twitter Dribbble Instagram Github

Navigation Using PixiJS

You might also like