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

zoukankan html css js c++ java

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

一、垂直菜单

<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>

<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;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;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);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;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; 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>

<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>

查看全文

相关阅读:
PCI-DSS-术语小结
 Visio快捷键-小结（Microsoft Visio绘图工具）
vs2019快捷键-小结(C#开发工具Visio studio 2019)
消息及时推送技术websocket
requests爬虫get请求三部曲（快速编码）-小结
 cnblogs_client博客园客户端——雏形
 重庆购房资料
 比较2个时刻日期字串的时间差：距离现在的时间距离（不同时间格式）
比较2个时刻日期字串的时间差
 时间戳转为日期字串

原文地址：https://www.cnblogs.com/this-xiaoming/p/5317529.html