Creating a dropdown menu with CSS and jQuery

The raw base

To start off with, we're going to at least need some sort of menu structure to get us going. For this, the best way to structure the menu is using an unordered list (ul), nesting your submenus as you go. Below is the example we're going to use in this demo it its raw unstyled format.

• Menu item 1
  • Submenu item 1

• Submenu item 1

• Menu item 2

• Menu item 3

• Menu item 4
  • Submenu item 4.1

• Submenu item 4.2

• Menu item 5

A little css

For the sake of this tutorial we're only going to give the menu a basic look and not get too fancy. So we'll just create a nice green and black menu.

The nav we are going to create is going to be a left to right manu, with the second level popping out below its parent, so we first need to order the items left to right and get the submenu it the right position. (To keep it simple, the style is going to be added to the same file and not extracted into a saperate stylesheet)

style_no_js.jpg

Hiding the submenu

Now that the menu is working and displaying as we want it to, now we need to hide the submenu by default and setup the style for the hover state. Change the left value for the "#mainmenu ul li ul" class to be off the screen somewhere (we're using -12000px here) and add a new hover class for the list item, which moves the ul back to where we just had it when the user hovers over the main menu item.

#mainmenu ul li ul{
	width: 170px;
	position: absolute;
	left: -12000px;
	float: left;
	clear: left;
}

#mainmenu ul li.hover ul{
	left: 0px;
}

Adding the jQuery event... the fun part

Up to this point, the file could run as a standalone HTML file, and with a little extra CSS could actually work in a lot of browsers, but there are many out there that don't support using the ":hover" on list items, so we need to make use of some javascript to tell the browser to react when the user hovers over the main menu items. So first step here is to actually load the jQuery javascript:

(The no conflict line has been added in cases where people may already be calling a javascript file that makes use of $, it prevents us from running into any javascript code conflicts)

And now here is where the magic happens, using jQuery you can 'chain' function calls one after the other without having to do each function call on an element on its own line which cuts down the file size and keeps things neat and together.

Finally, just to top things off we need to add some hover colors to the menu items.

#mainmenu ul li.hover a{
       background-color: #3c3;
}
#mainmenu ul li ul li.hover a{
       background-color: #333;
}

final_dropdown_menu.jpg

And that's it, a fully functional CSS dropdown using jQuery. In a later article, I'll cover adding a slight animation and also adding multiple levels of dropdowns.

Demo and full code

Here's the running demo - http://lazarus.salsainternet.com.au/demos/css_jquery_dropdown.html

Happy coding!

Chris

some idea, and using best practice, we can build a site that works really well, but until it's live, we don't really know exactly what the site needs to function successfully.

The trick often is finding a system to choose what functionality should in fact be included in each release. We recommend using a structured approach which allows you evaluate the business benefit and technical complexity of each of the items on the "wishlist", which factors heavily in the decision making process. So for example, if an item has high business benefit, and low technical complexity, then it is a great candidate for a first phase release. If the business benefit is low, and technical complexity high, perhaps it's best to leave it till the next phase.

There are various ways to implement this process, but as a start, just try writing them all down, and score them from 1-5 on business benefit (bb) and technical complexity (tc), then make your decisions from there. Let me know if you need a more detailed approach.

Or, ask your web developer to help you prioritise them based on their experience on what works.

Bye for now.