Fancy animated navigation

by

fancy-animated-navigation

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

 

Browser Support

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

 

Styling

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