各种菜单

来源：互联网发布：javascript权威指南7 编辑：程序博客网时间：2024/05/16 08:43

1，显示和隐藏二级菜单：ie6+

html代码：
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有二级列表的下拉菜单</title>
<link rel="stylesheet" type="text/css" href="css/demo1.css">
<script type="text/javascript" src="script/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="script/demo1.js"></script>
</head>
<body>
<ul class="menu">
<li><a href="javascript">首页</a>
<ul>
<li><a href="javascript:void;">1二级菜单一</a></li>
<li><a href="javascript:void;">1二级菜单一</a></li>
</ul>
 
</li>
<li><a href="javascript">一级菜单一</a>
<ul>
<li><a href="javascript:void;">1二级菜单一</a></li>
<li><a href="javascript:void;">1二级菜单一</a></li>
</ul>
</li>
<li><a href="javascript">一级菜单二</a></li>
<li><a href="javascript">一级菜单三</a></li>
<li><a href="javascript">一级菜单四</a></li>
</ul>
</body>
</html>

css的代码：

*{margin:0;padding: 0}
body{font-size: 14px;}
a{text-decoration: none;}
li{list-style: none;}
.menu{width: 600px;height: 40px; margin: 0 auto; background: #ccc;}
.menu li{position: relative; float: left; width: 120px; }
.menu li a{display: block; height: 40px;padding:0 10px; line-height: 40px; font-size: 16px; color: #000;text-align: center;}
.menu li a:hover{background-color: #ff0;}
.menu li ul{display: none; position: absolute; left: 0px; top: 40px;}
.menu li ul li{float: none;width: 120px; padding:0;margin-top: 5px; background-color: #ccc;}

jquery的代码：

$(document).ready(function() {
    
    //注意这里得用li，否则会出现bug
$(".menu>li").hover(function() {
$(this).children('ul').toggle();
}, function() {
$(this).children('ul').toggle();
});
 
});

效果展示：

2，变换菜单：ie6+,但是ie7有轻微的抖动：

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变换菜单</title>
<link rel="stylesheet" type="text/css" href="css/demo2.css">
</head>
<body>
<ul>
<li><a href="javascript:void(0);">首页<span>home</span></a></li>
<li><a href="javascript:void(0);">首页<span>home</span></a></li>
<li><a href="javascript:void(0);">首页<span>home</span></a></li>
<li><a href="javascript:void(0);">首页<span>home</span></a></li>
</ul>
 
</body>
</html>

css的代码：

*{margin:0; padding: 0}
a{text-decoration: none}
body{font-size: 14px;}
li{list-style: none;}
span{display: block;}
ul{width: 600px;border-bottom: 8px solid #ff0; margin:10px auto;  background: #ccc;overflow: hidden;}
ul li{float: left; width: 80px; margin-right: 1px; line-height: 40px;text-align: center;}
ul a{display: block; font-size: 16px; color: #000;}
ul a:hover{color: #fff; background: #00f;margin-top: -40px;}
ul a:hover span{ display: block;}
ul span{display: none;}

3,多级菜单：兼容ie6+

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" type="text/css" href="css/demo3.css">
</head>
<body >
<ul class="nav">
<li><a href="javascript:void(0);">首页+</a>
<ul>
<li><a href="">第一种+</a>
<ul>
<li><a href="javasript:void(0);">第二个</a></li>
<li><a href="javasript:void(0);">第二个</a></li>
<li><a href="javasript:void(0);">第二个</a></li>
</ul>
</li>
<li><a href="">第一种</a></li>
<li><a href="">第一种</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">首页</a></li>
<li><a href="javascript:void(0);">首页</a></li>
<li><a href="javascript:void(0);">首页</a></li>
<li><a href="javascript:void(0);">首页</a></li>
</ul>
 
</body>
</html>

css代码：

*{margin:0; padding: 0;}
body{behavior:url(csshover.htc);}  //兼容ie6的鼠标划过
li{list-style: none;}
a{display: block; text-decoration: none;}
 
.nav{width: 600px;height: 40px; margin: 10px auto}
ul li{float: left; width: 80px; margin-right: 1px;background: #ccc;}
ul li a{height: 40px; line-height: 40px;font-size: 16px; color: #000;text-align: center;}
ul li ul{display: none;}
ul li ul li{float: none; position: relative;}
ul li ul li ul{position: absolute; left: 80px; top: 0;}  //三级菜单
ul li:hover{background: #ff0;}
ul li:hover ul{display: block;}
ul li:hover ul li ul{display: none;}
ul li ul li:hover ul{display: block;}

4,下拉菜单的动画效果：（缓慢展开）

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画菜单js实现方式</title>
<link rel="stylesheet" type="text/css" href="css/demo4.css">
</head>
<body>
<ul>
<li><a href="javascript:void(0);">首页</a></li>
<li><a href="javascript:void(0);">首页</a>
<ul id="subMenu">
<span class="corner"></span>  <!--这个是箭头-->
<li><a href="javascript:void(0);">菜单</a></li>
<li><a href="javascript:void(0);">菜单</a></li>
<li><a href="javascript:void(0);">菜单</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">首页</a></li>
<li><a href="javascript:void(0);">首页</a></li>
</ul>
<script type="text/javascript" src="script/demo4.js"></script>
</body>
</html>

css代码：

*{margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
body{font-size: 14px;}
ul{width: 600px;margin: 20px auto;}
ul li{position: relative; float: left;background-color: #ccc;margin-right: 1px; }
ul li a{display: block; width: 80px; height: 60px; line-height: 60px;text-align: center;font-size: 18px; color: #000;}
ul li a:hover{background: url(../images/nav-bg.gif) repeat-x;}  //背景图
ul li ul{display: none; position: absolute;left: 0; top: 60px; height: 0; margin: 0px; overflow: hidden;}  //jquery的时候去掉height:0
.corner{display: block; height: 8px; background: url(../images/corner.gif) no-repeat 32px 0; _font-size: 0}

js的实现方式：通改变高度 ie6+

window.onload=function(){
var lis=document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover=function() {
var u=this.getElementsByTagName("ul")[0];
if(u!=undefined){
u.style.display="block";
changeH(u.id,1);
}
}
 
lis[i].onmouseleave=function() {
var u=this.getElementsByTagName("ul")[0];
if(u!=undefined){
u.style.display="block";
changeH(u.id,-1);
}
}
};
}
 
function changeH (id,count) {
var uList=document.getElementById(id);
var height=uList.offsetHeight;
height+=count;
if(count>0){
if(height<=67){
uList.style.height=height+"px";
setTimeout("changeH('"+id+"',1)",10);
}else{
return;
}
}else{
if(height>0){
uList.style.height=height+"px";
setTimeout("changeH('"+id+"',-1)",10);
}else{
return;
}
}
}

jQuery的实现方式：兼容i6+

$(document).ready(function() {
$("li").hover(function() {
$(this).children('ul').slideDown(1000);
}, function() {
$(this).children('ul').slideUp(1000);
});
 
});

css3.0的实现方式：兼容ie10+:

用到的几个知识点：
实现圆角：border-radius
实现渐变背景：linear-gradient
实现阴影:box-shadow
实现由透明到不透明:transition
实现尖角： :before

5，特效菜单（菜单的切换，菜单的展开和收缩） ie6+

html的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特效菜单</title>
<link rel="stylesheet" type="text/css" href="css/demo5.css">
<script type="text/javascript" src="script/jquery-1.12.1.min.js"></script>
</head>      
<body>
<div class="nav" id="nav">
<a href="javascript:void(0);">首页</a>
<a href="javascript:void(0);">课程大厅</a>
<a href="javascript:void(0);">学习中心</a>
<a href="javascript:void(0);">个人中心</a>
<a href="javascript:void(0);">关于我们</a>
</div>
 
<div class="expand" id="expand">   <!--用于定位置，放背景，控制高度-->
<div class="expandDiv">  <!--用于控制总的宽度-->  二级菜单的集合
<div class="expand-list">  <!--单个图片的位置，用flaot:left -->
<a href="javascript:void(0);">主页</a>
</div>  
<div class="expand-list">
<a href="javascript:void(0);">前端课程</a>
<a href="javascript:void(0);">手机开发</a>
<a href="javascript:void(0);">后台编程</a>
</div>
<div class="expand-list">  
<a href="javascript:void(0);">Javascript</a>
<a href="javascript:void(0);">CSS</a>
<a href="javascript:void(0);">JQuery</a>
</div>
<div class="expand-list">
<a href="javascript:void(0);">主个人信息：页</a>
</div>
<div class="expand-list">
<a href="javascript:void(0);">主页</a>
<a href="javascript:void(0);">主页</a>
<a href="javascript:void(0);">主页</a>
</div>
</div>
<div class="closeBtn" id="closeBtn"></div>
</div>
<script type="text/javascript" src="script/demo5.js"></script>
</body>
</html>

css代码：

*{margin: 0; padding: 0}
body{font-size: 18px;}
a{display: inline-block; text-decoration: none; color: #fff; }
.nav{position: absolute;top: 60px;left: 30%;}
.nav a{float: left;margin-left: 50px;color: #000;}
.expand{position: relative;top: 82px;width: 100%;height: 0px;overflow: hidden;background: #333D4D;}
.expandDiv{width: 500%; height: 130px;}
.expandDiv .expand-list{ float: left; width: 20%;line-height: 130px; text-align: center;color: #fff;}
.closeBtn{position: absolute;left: 50%;bottom: 2px; width: 120px;height: 18px;background: url(../images/icon.gif) no-repeat -17px -116px;  margin-left: -60px; cursor: pointer;}

jquery代码：

$(document).ready(function() {
 
// 不加return false 会有轻微的小bug
 
$("#nav").on('click', 'a', function() { //a是用于过滤的
// 切换，展开
 
 
//一切回归到原始状态
if($(this).hasClass('btn-active')){
$("#closeBtn").click();
}
 
// 1，获得现在是第几个a. 多个之间可以用，隔开,index() :获取当前的位置
var curIndex=$(this).index(),mlValue="-"+curIndex*100+"%";
 
// 判断是打开
if($("#expand .expandDiv").hasClass('active')){
$("#expand .expandDiv").css({marginLeft:mlValue});
}else{
$("#expand .expandDiv").css({marginLeft:mlValue});
// animate是动画，加了一个虚拟的类
$("#expand").animate({height:'130px'}).addClass('active'); 
}
 
//一级菜单处于激活状态
$(this).addClass('btn-active').siblings().removeClass('btn-active');
return false;
});
 
// 按钮关闭
$("#closeBtn").on('click', function() {
$("#expand").animate({height:'0px'}).removeClass('active'); 
$("#nav .btn-active").removeClass('btn-active');
 
return false;
});
});

效果：

0 0