jquerty滑鼠移上顯示隱藏選單簡潔下拉選單
阿新 • • 發佈：2019-01-30
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>滑鼠移上顯示隱藏選單</title> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#jsddm > li').bind('mouseover', jsddm_open); $('#jsddm > li').bind('mouseout', jsddm_timer); }); document.onclick = jsddm_close; var timeout = 500; 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; } } </script> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } #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 } </style> </head> <body> <div class="nav"> <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> <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> </ul> </li> <li><a href="#">HTML/CSS</a> <ul> <li><a href="#">Slide Effect</a></li> <li><a href="#">Opacity Mode</a></li> <li><a href="#">Drop Shadow</a></li> </ul> </li> <li><a href="http://www.lanrentuku.com/" target="_blank">Help</a></li> </ul> </div> </body> </html>