Creating a Simple Drop-Down Menu with jQuery

October 10th, 2012 Leave a comment
Like the article?
jQuery Simple Dropdown Menu

If you have learned anything about JavaScript, it is most likely that you have heard about jQuery. jQuery is a powerful tool for creating dynamic effects with JavaScript and can be used with CSS to create many different kinds of navigation systems on your Web sites. In this article, I will show you how to create a drop-down menu using jQuery and CSS.

Creating the HTML

First, we create the HTML for the menu structure. We will use <div> tags with the HTML list tag <li> to create the top level and submenu items.

<div class="menu">
  <a class="links" >My Links</a>

  <div class="submenu">
    <ul class="rootmenu">
      <li><a href="#Link1">Link1</a></li>
      <li><a href="#Link2">Link2</a></li>
      <li><a href="#Link3">Link3</a></li>
      <li><a href="#Link4">Link4</a></li>

As you can see, the class “menu” is the top level of the menu with class “submenu” creating a level underneath. Each <li> item will be a different item in the menu’s list.

Setting up the CSS

The CSS code is fairly straight forward as it allows us to line up our submenu with our root menu to create the drop-down menu look we are going for. By using z-index offsets, we will overlap them to make them look like different menu items. Here is the CSS:

.menu {
 	color: #777;
 	text-align: left;
 	width: 150px;
 	position: relative;
 	height: 17px;
	margin: 3px -22px 0 0;

.submenu {
	background: #fff;
 	margin-left: 10px;
 	left: -20px;
 	z-index: 100;
 	width: 140px;
	padding: 40px 0 5px;
 	border-radius: 6px;
 	position: absolute;
 	display: none;
 	top: -12px;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);

.menu li a {
 	cursor: pointer;
 	font-weight: bold;
 	color: #777;
 	display: block;
 	font-family: helvetica;
 	padding: 8px 16px;

.menu li a:hover {
 	text-decoration: none;
 	color: #FFF;

a.links {
 	position: absolute;
 	height: 28px;
 	background: url(icons/arrow.png) 116px 17px no-repeat;
 	font-size: 11px;
 	line-height: 16px;
 	color: #555;
 	width: 121px;
 	margin: -11px 0 0 -10px;
 	text-decoration: none;
 	z-index: 110;
 	display: block;
 	padding: 11px 0 0 20px;

.rootmenu {
 	margin: 0px;
	font-size: 11px;
 	list-style: none;
 	padding: 0px;
 	border-top:1px solid #ccc;
 	padding: 11px 0 0 0px;

The JavaScript

Next, we need to setup the JavaScript code that will create the animation for our menu and make it dynamically open and close when the user clicks on it. We will be using a jQuery library to create the “on the fly” look and feel of the menu and so the page does not require any postbacks to perform.

$(document).ready(function() {
  $(".links").click(function() {
    var x = $(this).attr('id');	
    if (x == 1) {
      $(this).attr('id', '0'); 
    } else {
      $(this).attr('id', '1');

  // Mouse click on sub menu
  $(".submenu").mouseup(function() {
    return false;

  // Mouse click on my account link
  $(".links").mouseup(function() {
    return false;

  // Document Click
  $(document).mouseup(function() {
    $(".links").attr('id', '');

As you can see in the above script, we are using the .click function of the “links” anchor tag, and, based on condition, showing .submenu div box. Once the mouse button is released, $(document).mouseup(function() causes the submenu to hide.

Using these techniques together with jQuery allows you to quickly create a dynamic drop-down menu for your Web site that adds style and professionalism. If you would like to try it out for yourself, you can use the attached code from this tutorial.

Article Source Files

DescriptionNameSizeDownload method
jQuery Simple Dropdown Menu Source Codesimple_dropdown_menu.zip1.49KBHTTP
Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!