Advertisements

MultiLevel Menu


A simple multilevel menu with delayed item animations and an optional breadcrumb navigation and back button.

multi-level menu with delayed item animations and an optional breadcrumb navigation and back button.

Today’s Blueprint is a simple menu with multiple levels. The idea is to animate each menu item once a level is changed. The animation starts with the item clicked and the delays are propagated through the neighbors. The animation delays follow the same logic for the incoming items of the new level of the multi-level menu. As optional elements we have a breadcrumb navigation and a back button (not shown in our demo). Deeper levels are referenced with a data attribute. We have added some example media queries for a mobile menu version with a menu toggle. We’ve also provided a simple callback example.

The icons used in the demo are from the Organic Food icon set by Wojciech Zasina and the Feather icon setby Cole Bemis.

 

Read more

Demo

Advertisements

About guruprakash

Graphic and Web designer
%d bloggers like this: