Easy jQuery Navigation

Sep 30, 2016




In this tutorial we’ll show you how to build a  navigation menu. Navigation menu is a common trend in modern web design, and you can see that many websites prefer that type of menu. It removes   from the page, and makes it more readable, allowing you to put all the emphasis on the content.


Building our First Document :

We can start with the navigation menu and build out the other demos using similar code snippets. I am including the jQuery and jQuery UI libraries hosted by Google.

Add jquery.min.js to your file

Navigation Menu Demo

We are using  ul/li  code pattern  to approach navigation by applying some CSS styling.
Create an HTML file and write following code in it.

Designing the Page Layout :

With all the basic HTML in place we can jump over into our CSS stylesheet. Now, add some styling to recast them into navigated menu.

Looking into jQuery  :

Now, consider the core part of this jQuery navigation menu.
Our aim is ,whenever the mouse hover on the menu, the sub-menu of particular parent menu should open. This is done by simple display : none and display : block .

But, This code will not make our code interactive and animated. To make the menu attractive and interactive ,we must need to use jQuery animation effects.

  • To do this , we need to focus on two events :

    1.Mouse Hover
    2.Mouse Out There are many jQuery  effects ,
    but we will use jQuery slideUp and slideDown, as we are making navigation menu.

  • We have three sliding jQuery effects :


    A toggle is a keyword in jQuery which works on two opposite parameters. i.e The toggle() method toggles between hide() and show() for the selected elements. Similarly , SlideToggle is a combined method of slideUp and slideDown ,and it also contains mouse hover and mouse out event together. As jQuery works on the principle of  “Write Less ,Do More” so ,it is good to write as less as a possible code of jQuery

  • Add following code in your file :

    I do hope this tutorial may offer a solution to some designers or web developers out there. The codes have been tested in all modern standards-compliant browsers and should work perfectly. You are free to download a copy of  codes and edit/customize to your own liking

Download complete code   or   See the live demo

Visit our blogs regularly to know more about jQuery and let us ask any doubts regarding jQuery navigation.We will replay asap.

Contact us for Web Development and Mobile Application Development.

Post by hardik

Leave a Reply

Your email address will not be published. Required fields are marked *