码迷，mamicode.com
首页 > 其他好文 > 详细

各种菜单

时间：2016-03-26 07:23:53      阅读：254      评论：0      收藏：0      [点我收藏+]

标签：

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;
	});
});
效果：
技术分享
 

各种菜单

标签：

原文地址：http://blog.csdn.net/tyutjavalily/article/details/50983033
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！