Drop down menus with jQuery
After attempting sliding menus with jQuery I developed drop down menus using lists.
Here is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Drop Down Menus With jQuery</title> <script type="text/javascript" src="js/jquery.js“></script> <script type=”text/javascript”> function mainmenu(){ $(”#nav ul” ).css({display: “none”}); // Opera Fix $(”#nav>li” ).hover( function(){ $(this).find(’ul:first’).css({visibility: “visible”,display: “none”}).show(400); }, function(){ $(this).find(’ul:first’).css({visibility: “hidden”}); }); } $(document).ready(function(){ mainmenu(); }); </script> <style type=”text/css”> #nav, #nav ul{ margin:0; padding:0; list-style-type:none; list-style-positionutside; position:relative; } #nav>li{ float:left; position:relative; } #nav>li>a{ font-size:12px; font-family: arial; color:#000000; padding:5px; text-decoration:none; border: 1px solid #ddd; background:#eee; } #nav ul { position:absolute; dispay:none; } #nav a{ display:block; } #nav>li>ul>li>a{ font-size:12px; font-family: arial; color:#000000; padding:3px; text-decoration:none; border: 1px solid #aaa; background:#bbb; } </style> </head> <body> <ul id=”nav”> <li><a href=”">HTML</a></li> <li><a href=”#” >CSS</a> <ul> <li><a href=”#”>CSS 1</a></li> <li><a href=”#”>CSS 2</a></li> <li><a href=”#”>CSS 3</a></li> </ul> </li> <li><a href=”#” >Javascript</a> <ul> <li><a href=”#”>Mootools</a></li> <li><a href=”#”>Prototype</a></li> <li><a href=”#”>jQuery</a></li> <li><a href=”#”>Yahoo! UI</a></li> <li><a href=”#”>Dojo</a></li> <li><a href=”#”>Mochi Kit</a></li> </ul> </li> </ul> </body> </html>
Trackbacks
Use this link to trackback from your own site.
