Fancy animated navigation



A simple and fancy animated navigation for you, to add a dash of modernism to your navigation.


Browser Support



fancy animated navigation


Html structure

HTML structure is very simple and is composed from 2 main elements: trigger icon which is visible and navigation which is hidden.


Now let split up our code, and start with our main piece trigger icon, you can change animation from demo.css file


Second we have our main navigation and unordered list with children and submenu


The class back is necessary to return to our main menu, also you can replace “back”  with an icon. For example we can use Font Awesome icons


jQuery Events

We control our content by adding few classes with the help of jQuery click() event

icon-active – is used to make animation on icon
active-submenu – activate submenu animation



This is all the code you need to achieve this effect


And also we have some responsive styling for tablet and phone devices


We are looking forward to see your comments and hope you find it useful.

comments powered by Disqus