This example follows the same code structure and menu that was done using JavaScript alone at Lecture - JavaScript - Creating menus with JavaScript , you should be familiar with this before progressing.
In addition you should be familiar with the Lecture - JQuery - Getting Started with JQuery
Topics Covered:
Creating simple drop down menus
http://online1.daytonastate.edu/player2.php?id=a57e8915461b83adefb011530b711704
This is at http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
<html> <head> <title></title> </head> <body> <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> </body> </html> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>JQuery Menu Example</title> <link rel="stylesheet" type="text/css" href="/jmenu.css" > <script src="jquery.js"></script> <script type="text/javascript"> var timeout = 2000; var closetimer = 0; var ddmenuitem = 0; function jsddm_open() { jsddm_canceltimer();
jsddm_close(); ddmenuitem = $(this).find('ul').eq(0).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; </script> </head> <body> A nice thing about this menu is the ability to place it anywhere on a page. <br/><br/> <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> </body> </html> |
#jsddm { margin: 0;
padding: 0} #jsddm li { float: left;
list-style: none; font: 12px Tahoma, Arial} #jsddm li a { display: block;
background: #324143; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap} #jsddm li a:hover { background: #24313C}
#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: #A9C251; color: #24313C} #jsddm li ul li a:hover { background: #8EA344}
|