导航条js+css特效代码怎么用

html-css010

导航条js+css特效代码怎么用,第1张

导航条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预览导航效果。如图：

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

过渡效果是在鼠标指针浮到元素上时发生的效果。

CSS过渡是元素从一种样式逐渐改变为另一种的效果，这边要注意的是，想要实现这一点，必须规定两项内容，规定您希望把效果添加到哪个CSS属性上规定效果的时长，规定您希望把效果添加到哪个CSS属性上，规定效果的时长。