So, I present to you the simple drop-down menu. The peculiarity of this menu is that these 20 lines of code and absence of various cumbersome mouse events within html code. This script requires the jQuery library. There's a version that does not require jQuery.
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, but please put a link to this page where you want.
Example:
http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
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">
License: Free, but please put a link to this page where you want.
