关于各种导航栏菜单的制作
一、垂直菜单
<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;width:120px; height:30px; text-align:center; line-height:30px; margin-bottom:1px;}
.nav a:hover{ color:white; background-color:#FF6600;}
</style>
</head>
<body>
<ul class="nav">
<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>
</body>
</html>
二、水平菜单
1、静态水平菜单——css
<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;background-color:#efefef;width:80px; height:30px; text-align:center; line-height:30px; margin-bottom:1px;margin-left:1px; }
.nav a:hover{ color:white; background-color:#FF6600;}
</style>
</head>
<body>
<ul class="nav">
<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>
</body>
</html>
2、上下伸缩水平菜单——css
<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;background-color:#efefef;width:80px; height:30px; text-align:center; line-height:30px; margin-bottom:1px;margin-left:1px; }
.nav a.on, a:hover{ color:white; background-color:#FF6600; height:35px; margin-top:-5px;}/*设置height为35的时候，块元素的高度向下增长5px，所以需要在设置一个margin-top =-5使整体上移5px*/
</style>
</head>
<body>
<ul class="nav">
<li><a href="#" class="on">首 页</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>
</body>
</html>
3.圆角菜单——Css
<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; background:url(btnBg.png);width:120px; height:30px; text-align:center; line-height:30px; margin-bottom:1px;margin-left:1px; }
.nav a.on, a:hover{ color:white; background-position:0 -30px; }/*通过灰色圆角按钮加上橙色圆角按钮组合成的背景图片然后上移实现圆角动态切换*/
</style>
</head>
<body>
<ul class="nav">
<li><a href="#" class="on">首 页</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>
</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;width: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>
<ul class="nav">
<li><a href="#" class="on">首 页</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>
</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; width:120px; height:30px;}/*此处不设置宽高会出问题*/
.nav a{display:block;width: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;width: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>
<ul class="nav">
<li><a href="#" class="on">首 页</a>
<ul class="subnav">
<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 class="subnav">
<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 class="subnav">
<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 class="subnav">
<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 class="subnav">
<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 class="subnav">
<li><a href="#" >子菜单</a></li>
<li><a href="#" >子菜单</a></li>
<li><a href="#" >子菜单</a></li>
<li><a href="#" >子菜单</a></li>
</ul></li>
</ul>
</body>
</html>
