关于各种导航栏菜单的制作

一、垂直菜单

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航菜单</title>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
a{text-decoration:none;color:#333;}
.nav a{display:block; background-color:#efefef;120px; height:30px; text-align:center; line-height:30px; margin-bottom:1px;}
.nav a:hover{ color:white; background-color:#FF6600;}
</style>
</head>
<body>

</body>
</html>

二、水平菜单

1、静态水平菜单——css

</body>
</html>

2、上下伸缩水平菜单——css

</body>
</html>

3.圆角菜单——Css

</body>
</html>

4、水平菜单伸缩——利用js

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航菜单</title>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
a{text-decoration:none;color:#333;}
.nav{ list-style:none; height:30px;margin-top:20px; padding-left:50px;border-bottom:10px solid #FF6600;}
li{float:left;}
.nav a{display:block;80px; height:30px; text-align:center; line-height:30px; background:#CCCCCC; margin-bottom:1px;margin-left:1px; }
.nav a.on, a:hover{ color:white; background:#FF6600;}
</style>
<script>
window.onload=function(){//window.onload页面加载的时候可以调用某个函数
var unode=document.getElementsByTagName('ul')[0];
var ua=unode.getElementsByTagName('a');
for( var i=0;i<ua.length;i++){
ua[i].onmouseover=function(){
if(this.className!="on"){
var This=this;//用this对象传入，this代表选中的a标签
clearInterval(This.timer);//防止累加
This.timer=setInterval(function(){
This.style.width=This.offsetWidth+8+"px";//offsetWidth的宽度值包含了border width padding和值，是一个数值，style.width是一个字符串
if(This.offsetWidth>=120){
This.style.width="120px";
clearInterval(This.timer);
}
},30);

}
}
ua[i].onmouseout=function(){
if(this.className!="on"){
var This=this;
clearInterval(This.timer);
This.timer=setInterval(function(){
This.style.width=This.offsetWidth-8+"px";
if(This.offsetWidth<=80){
This.style.width="80px";
clearInterval(This.timer);
}
},30);

}
}

}
}

</script>
</head>
<body>

</body>
</html>

5、动画子菜单—js

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>d动画子菜单</title>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
a{text-decoration:none;color:#333;}
.nav{ list-style:none; height:30px;margin-top:20px; padding-left:50px;border-bottom:10px solid #FF6600;}
.nav li{float:left; position:relative; 120px; height:30px;}/*此处不设置宽高会出问题*/
.nav a{display:block;120px; height:30px; text-align:center; line-height:30px; background:#CCCCCC; margin-bottom:1px;margin-left:1px; }
.nav li a.on, a:hover{ color:white; background:#FF6600;}
.subnav a{ background: #FF9900; text-align:center;}
.subnav{ position:absolute; top:40px;120px; left:0; height:0;overflow:hidden;/*height 0 和overflow hidden 将子菜单隐藏*/ }
.subnav li a:hover{ background:#FF6600;}
</style>
<script type="text/javascript">
window.onload=function(){
var aLi=document.getElementsByTagName("li");
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover=function(){
var This=this.getElementsByTagName("ul")[0];
clearInterval(This.time);
This.time=setInterval(function(){
This.style.height=This.offsetHeight+30+"px";
if(This.offsetHeight>=120){
This.style.height="120px";
clearInterval(This.time);}
},30)
}
aLi[i].onmouseout=function(){
var This=this.getElementsByTagName("ul")[0];
clearInterval(This.time);
This.time=setInterval(function(){
This.style.height=This.offsetHeight-30+"px";
if(This.offsetHeight<=0){
This.style.height="0";
clearInterval(This.time);}
},30)
}
}
}
</script>

</head>
<body>

</body>
</html>