js写导航栏hover效果

JavaScript016

js写导航栏hover效果,第1张

js写导航栏hover效果每个js定时器产生时会被系统分配一个id，这个id是正整数，而且一个页面里面的定时器id不重复，我们能用一个变量接收这个id，但是如果重复执行一条接收创建语句，那么你只能接收到最新创建的定时器的id，之前创建的定时器的id会被覆盖，但是定时器数量在增加，这就会导致界面一些功能错乱，解决方法就是在重复按开始按钮时，如果已经有了一个定时器那么就不执行语句，我列出了错误代码和三种解决方法，可以解决定时器重复创建问题。

导航条js+css特效一般都用于首页index文件，作为网站的主页栏目导航。

1、打开Dreamweaver创建新页面，输入以下代码。如图：

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<script src="

<title>css菜单演示</title>

<style type="text/css">

<!--

*{margin:0padding:0border:0}

body {

 font-family: arial, 宋体, serif

        font-size:12px

}

#nav {

  line-height: 24px list-style-type: none background:#666

}

#nav a {

 display: block width: 80px text-align:center

}

#nav a:link {

 color:#666 text-decoration:none

}

#nav a:visited {

 color:#666text-decoration:none

}

#nav a:hover {

 color:#FFFtext-decoration:nonefont-weight:bold

}

#nav li {

 float: left width: 80px background:#CCC

}

#nav li a:hover{

}

#nav li a.on{ background:#999}

#nav li ul {

 line-height: 27px list-style-type: nonetext-align:left

 left: -999em width: 180px position: absolute 

}

#nav li ul li{

 float: left width: 180px

 background: #F6F6F6 

}

#nav li ul a{

 display: block width: 180pxw\idth: 156pxtext-align:leftpadding-left:24px

}

#nav li ul a:link {

 color:#666 text-decoration:none

}

#nav li ul a:visited {

 color:#666text-decoration:none

}

#nav li ul a:hover {

 color:#F3F3F3text-decoration:nonefont-weight:normal

 background:#C00

}

#nav li:hover ul {

 left: auto

}

#nav li.sfhover ul {

 left: auto

}

#content {

 clear: left 

}

-->

</style>

<script type=text/javascript><!--//--><![CDATA[//><!--

$(function(){

  $("#nav li").hover(function(){

  $(this).children("a").toggleClass("on") 

  })

})

function menuFix() {

 var sfEls = document.getElementById("nav").getElementsByTagName("li")

 for (var i=0 i<sfEls.length i++) {

  sfEls[i].onmouseover=function() {

  this.className+=(this.className.length>0? " ": "") + "sfhover"

  }

  sfEls[i].onMouseDown=function() {

  this.className+=(this.className.length>0? " ": "") + "sfhover"

  }

  sfEls[i].onMouseUp=function() {

  this.className+=(this.className.length>0? " ": "") + "sfhover"

  }

  sfEls[i].onmouseout=function() {

  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 

"")

  }

 }

}

window.onload=menuFix

//--><!]]></script>

</head>

<body>

<ul id="nav">

<li><a href="#">百度知道</a>

 <ul>

 <li><a href="#">百度芝麻</a></li>

 <li><a href="#">产品一</a></li>

 <li><a href="#">产品一</a></li>

 <li><a href="#">产品一</a></li>

 <li><a href="#">产品一</a></li>

 <li><a href="#">产品一</a></li>

 </ul>

</li>

<li><a href="#">百度行家</a>

 <ul>

 <li><a href="#">服务二</a></li>

 <li><a href="#">服务二</a></li>

 <li><a href="#">服务二</a></li>

 <li><a href="#">服务二</a></li>

 <li><a href="#">服务二</a></li>

 <li><a href="#">服务二</a></li>

 </ul>

</li>

<li><a href="#">百度芝麻酱</a>

 <ul>

 <li><a href="#">案例三</a></li>

 <li><a href="#">案例三</a></li>

 </ul>

</li>

<li><a href="#">关于百度</a>

 <ul>

 <li><a href="#">关于百度</a></li>

 <li><a href="#">关于百度</a></li>

 <li><a href="#">关于百度</a></li>

 <li><a href="#">关于百度1</a></li>

 </ul>

</li>

<li><a href="#">在线百度</a>

 <ul>

 <li><a href="#">演示</a></li>

 <li><a href="#">演示</a></li>

 <li><a href="#">演示</a></li>

 <li><a href="#">演示演示演示</a></li>

 <li><a href="#">演示演示演示</a></li>

 <li><a href="#">演示演示</a></li>

 <li><a href="#">演示演示演示</a></li>

 <li><a href="#">演示演示演示演示演示</a></li>

 </ul>

</li>

<li><a href="#">联系百度</a>

 <ul>

 <li><a href="#">联系百度</a></li>

 <li><a href="#">联系百度</a></li>

 <li><a href="#">联系百度</a></li>

 <li><a href="#">联系百度</a></li>

 <li><a href="#">联系百度</a></li>

 <li><a href="#">联系百度</a></li>

 <li><a href="#">联系百度</a></li>

 </ul>

</li>

 </ul>

</li>

</ul>

</body>

</html>

2、点击F12预览导航效果。如图：

注意事项：代码中的导航分为一级导航和二级感应导航，直接修改为所需栏目名称即可使用。