JavaScript Array
Home » Scripts and Tricks » jQuery Drop Down Menu

jQuery Simple Drop-Down Menu Plugin

The peculiarity of this dropdown menu is that these 20 lines of code and absence of various cumbersome mouse events within html code.

The HTML code of the menu represents like unordered list (ul-tag) and has no anything extra insertions. Just plain list of the items. The small size script finds this list by ID and then, just hang on the mouse event handlers.
Very neatly.

If you are looking for the Plain drop-down menu script without jQuery requirement, you can find it here: Simple DD Menu v2.0

Example:

Compatibility: IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+
Requirements: jQuery library
Size: < 1Kb;
Features:

  • unordered list as menu structure
  • absence of mouse events within html
  • timeout effect

License: Free.

Tutorial

OK, let's do it. You have to include the jQuery library:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script>

As you can see, the link points to Google address. There is much probability that the jQuery already cached in the browser.

Now you can create main menu structure using HTML unordered list. Using of an unordered list for navigation is a very good practice. First of all it is semantically correct, it is also handy for changing/editing especially in compound treelike cases.

<ul id="jsddm">
    <li><a href="#">JavaScript</a>
        <ul>
            <li><a href="#">Drop Down Menu</a></li>
            <li><a href="#">jQuery Plugin</a></li>
            <li><a href="#">Ajax Navigation</a></li>
        </ul>
    </li>
    <li><a href="#">Effect</a>
        <ul>
            <li><a href="#">Slide Effect</a></li>
            <li><a href="#">Fade Effect</a></li>
            <li><a href="#">Opacity Mode</a></li>
            <li><a href="#">Drop Shadow</a></li>
            <li><a href="#">Semitransparent</a></li>
        </ul>
    </li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">HTML/CSS</a></li>
    <li><a href="#">Help</a></li>
</ul>

The difference between this list from any other - the identifier [ id="jsddm" ].

Styles. Align elements of the first level in a row. Setup for all a-tags display:block style. Hide all inner unordered lists (layers). Decorate everything else.

#jsddm
{	margin: 0;
	padding: 0}
	
	#jsddm li
	{	float: left;
		list-style: none;
		font: 12px Tahoma, Arial}

	#jsddm li a
	{	display: block;
		background: #20548E;
		padding: 5px 12px;
		text-decoration: none;
		border-right: 1px solid white;
		width: 70px;
		color: #EAFFED;
		white-space: nowrap}

	#jsddm li a:hover
	{	background: #1A4473}
		
		#jsddm li ul
		{	margin: 0;
			padding: 0;
			position: absolute;
			visibility: hidden;
			border-top: 1px solid white}
		
		#jsddm li ul li
		{	float: none;
			display: inline}
		
		#jsddm li ul li a
		{	width: auto;
			background: #9F1B1B}
		
		#jsddm li ul li a:hover
		{	background: #7F1616}

So, the script. Bind event handlers with a first-level li-nodes. If mouse over the button - close old layer(if it visible) and open new. When mouse out from button - turn on the timer to 500 milliseconds to close all layers. That's all :)

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open)
   $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

Note: Please don't forget to use the DOCTYPE declaration for universal compatibility, for example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Looking for Multi-Level Menu Script? See the Multi Level Drop Down Menu.


      












Subscribe

© 2006-2014 Javascript-Array.com