Design Resources

Multi-Level Push Menu for Infinite Nested Submenus Oct 10, 2013

Codrops 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.

Multi-Level Push Menu for Infinite Nested Submenus

Related

Beginner’s Guide Into Responsive Web Design
Multi-Level Push Menu for Infinite Nested Submenus
Tutorial: Form Styling with CSS
Web Design 101: Backgrounds
Rediscovering the Button Element
Beginner’s Guide Into Responsive Web Design

stickUp : stick an element to the top of the browser

Colorful CSS3 Animated Navigation Menu

Tutorial: Form Styling with CSS

Web Design 101: Backgrounds