zoukankan html css js c++ java

各种菜单

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{ 600px;height: 40px; margin: 0 auto; background: #ccc;}
.menu li{position: relative; float: left;  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; 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{ 600px;border-bottom: 8px solid #ff0; margin:10px auto;  background: #ccc;overflow: hidden;}
ul li{float: left;  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;
	});
 
	// button关闭
	$("#closeBtn").on('click', function() {
		$("#expand").animate({height:'0px'}).removeClass('active'); 		
		$("#nav .btn-active").removeClass('btn-active');
 
		return false;
	});
});

效果：

查看全文

相关阅读:
SQL server 和Oracle 序列
 AD 域服务简介（一）- 基于 LDAP 的 AD 域服务器搭建及其使用（转）
Windows Server 2008 R2 搭建DNS服务器（转）
windows7下搭建HTTP服务器
 解决vcenter 6.0 vcsa安装插件时报错的问题
 Windows server 2008R2系统登录密码破解
 vmware Horizon 7 与远程桌面（mstsc）兼容性问题解决办法
 VCSA服务重启命令
 如何哄女朋友开心（转）
快速搭建一个本地的FTP服务器 win10及win7

原文地址：https://www.cnblogs.com/mfmdaoyou/p/7297850.html