« Previous Post

Next Post »


JQuery Tutorial: Drop Down Menu

Posted on September 12, 2016

In this tutorial I will show you how to use  jQuery to create a simple drop down menu when the mouse hovers over the main navigation. No advanced skills are needed!

screen-shot-2016-09-12-at-21-40-09

Click to view the live demo »

To begin, set up your menu using a non ordered list as follows:

screen-shot-2016-09-12-at-21-16-05

As you can see, the sub menu is nested underneath one of the list items. (<li>). Now we head over to the css to style accordingly.

screen-shot-2016-09-12-at-21-20-45screen-shot-2016-09-12-at-21-22-19

We use positon:relative for the <li>’s and position:absolute for the sub menu (ul#nav ul) and set to top:33px; left:0;. This will make each drop down sub menu sit directly underneath it’s parent. We give the sub menu display:none; to hide it. Now let’s get to the jQuery…

screen-shot-2016-09-12-at-21-36-52

First, we link to the latest version of jquery to tell the browser that jquery is being used on this site. Click here for the most up to date version of jquery. We then call a function that says when we hover over a list item, find it’s child <ul> and display it. We use the .toggle() menthod here which toggles between hide() and show() for the selected elements. To give it a nice sliding effect, simply use slideToggle(), and define the speed within the brackets.

And there you go – told you it was easy!


Recent Posts

Tags