Breaking News
You are here : Home / Web Design / Javascript/Jquery / Sleek Jquery Menu
Sleek Jquery mene

Sleek Jquery Menu

Sleek Jquery Menu

Hello Guys ! Sleek jquery Menu is very a Jquery Based menu .this is very simple and Beginner level menu.the Jquery Snippet is very simple and easy to understand.so without wasting time lets get startted:

First of all create HTML unordered list with id=’navigation’ .Inside it create create list items and anchor tags for the links.

now after creating this html lists we would apply some style that it looks like a proper menu.so here is the css code:

the CSS code is pretty easy and can be easily understood.hope all readers knows CSS.

So After CSS is done now we apply Jquery .Jquery code is where magic happens.the snipper for jquery is very small and easy.

What we have done in Jquery code is that we just animated the margin top on the hover event of ‘li’.then after hover event is ends the callback function then animates back to the normal position.

You can see the live demo and download the source code here.

[jbutton link=”http://demo.designaeon.com/sleekmenu/” color=”blue” newpage=”yes”]LIVE DEMO[/jbutton]

[jbutton link=”http://download.designaeon.com/sleekmenu.rar” color=”blue”]DOWNLOAD[/jbutton]

That was all guys .I hope you lilke it.Hit like and do share if you liked it

Tags : , ,

1 Reply

  1. admin says:

    how was that….

Leave a Reply

Want to join the discussion ? Feel Free to contribute !

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">