示例 jquery nav下拉菜单

最新推荐文章于 2025-07-11 15:37:19 发布

转载最新推荐文章于 2025-07-11 15:37:19 发布 · 1.4k 阅读

文章标签：

#jquery #function #timer #float #null #c

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用jQuery插件创建动态下拉菜单，并通过JavaScript实现菜单效果的平滑过渡，包括滑动、淡入、透明度变化和阴影效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />

<style type="text/css">
#nav{margin:0;padding:0}
#nav li{float: left;list-style: none;font: 12px Tahoma, Arial}
#nav li a{display: block;background: #324143;padding: 5px 12px;text-decoration: none;border-right:1px solid white;width: 70px;color: #EAFFED;white-space: nowrap}
#nav li a:hover{background: #24313C}
#nav li ul{margin:0;padding: 0;position: absolute;visibility: hidden;border-top: 1px solid white}
#nav li ul li{float: none;display: inline}
#nav li ul li a{width: auto;background: #A9C251;color: #24313C}
#nav li ul li a:hover{background: #8EA344}
</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var menuitem = 0;

function nav_open(){
 nav_canceltimer();
 nav_close();
 menuitem = $(this).find('ul').eq(0).css('visibility', 'visible');
}

function nav_close(){
 if(menuitem) menuitem.css('visibility', 'hidden');
}

function nav_timer(){
 closetimer = window.setTimeout(nav_close, timeout);
}

function nav_canceltimer(){
 if(closetimer){
  window.clearTimeout(closetimer);
  closetimer = null;
 }
}

$(document).ready(function(){
 $('#nav > li').bind('mouseover', nav_open);
 $('#nav > li').bind('mouseout',  nav_timer);
});
document.onclick = nav_close;
</script>

</head>

<body>

<ul id="nav">
 <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="#" target="_blank">Help</a></li>
</ul>
</body>
</html>