Quickly Create a Beautiful Drop Down Navigation With jQuery

29 Jan , 2014  jQuery 

Quick and Simple jQuery NavigationThis quick tutorial teaches us how to create a simple drop down navigation with jQuery. This menu is created quickly using little jQuery code and CSS. The menu shows us animated drop down on mouse hover.

Today, we are going to learn how to quickly create a simple drop down menu with the help of little jQuery and little CSS. This menu is easy to understand and create. This menu is free to use on your website.

There are N number of menus out there based on jQuery and CSS. Today, we will focus on simplicity and with little coding. The animation generated in this menu is done using jQuery slideUp() and slideDown() functions.

The final creation of the menu would look like as shown below:
jQuery Drop Down in Action

You can check the demo and download from the below links:

DEMO | DOWNLOAD

Quickly Created Beautiful Drop Down Navigation With jQuery:

Firstly, we shall the jQuery, CSS and HTML codes. After which we shall the explanation.

HTML:

CSS:

jQuery:

Explanation:

The HTML is simple to understand. We create an unordered list(ul tag) with id “nav”. This is the main layout of our navigation. We create all the menu items and sub menu items using the list(li tag).

In the CSS, we order all the menu items(li) to left. We do the relative positioning of the the menu items.

The navigation is positioned according to its normal position by doing so.

All the links in the first level parent menu items are given some styles. Similarly, we give styles to all the sub menu items.

We hide the sub-menus by default as shown below and the positioning is absolute to the navigation bar(relative to the first positioned element):

We have used display:block properties to fill the whole section of the li. This is used when longer words are used for the menu names.

Now, we need to use jQuery to show some hover effects on the menus which contain sub-menus using the slideDown() and slideUp() functions as shown below:

Hope you enjoyed this quick tutorial to create a simple drop down menu using jQuery. Check out the demo once again below:

DEMO | DOWNLOAD

If you have any doubts and clarifications, please let us know by commenting below.



, ,

Comments are closed.