Drop-down—HTML code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="imagetoolbar" content="false" /> <title>jQuery Cookbook - Ch.13 - Building Drop-Down Menus</title> <link rel="stylesheet" type="text/css" href="../_common/basic.css" /> <link rel="stylesheet" type="text/css" href="dropdown.css" /> <!--[if IE 6]> <script type="text/javascript" src="../_common/jquery.js"></script> <script type="text/javascript" src="dropdown.js"></script> <![endif]--> </head> <body> <div id="container"> <ul class="dropdown"> <li class="dropdown_trigger"> <a href="#">Nav Item</a> <ul> <li> <a href="#">Subitem</a> </li> <li> <a href="#">Subitem</a> </li> <li> <a href="#">Subitem</a> </li> <li> <a href="#">Subitem</a> </li> <li> <a href="#">Subitem</a> </li> </ul> </li> ... </ul> <p> This text is just here to show that the menu overlaps the content below it. </p> ... </div> </body> </html>
Drop-down—jQuery code // Initialize. function init_dropdown() { // Does element exist?
304 | Chapter 13: Interface Components from Scratch