使用jquery实现的简单下拉菜单（下拉框）效果菜单导航__脚本特效

使用jquery实现的简单下拉菜单（下拉框）效果

时间： 2009-09-19 16:10:16　阅读次数：3975

<!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" />
<title>Jquery实现的下拉菜单_飞飞Asp技术乐园</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script>
<script>
var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').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>
<style type="text/css">
#jsddm {
	margin: 0;
	padding: 0
}
#jsddm li {
	float: left;
	list-style: none;
	font: 12px Tahoma, Arial
}
#jsddm li a {
	display: block;
	background: #20548E;
	padding: 5px 12px;
	text-decoration: none;
	border-right: 1px solid white;
	width: 70px;
	color: #EAFFED;
	white-space: nowrap
}
#jsddm li a:hover {
	background: #1A4473
}
#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: #9F1B1B
}
#jsddm li ul li a:hover {
	background: #7F1616
}
</style>
</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>

提示：您可以先修改部分代码再运行