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; }); // button关闭 $("#closeBtn").on('click', function() { $("#expand").animate({ height:'0px'}).removeClass('active'); $("#nav .btn-active").removeClass('btn-active'); return false; }); }); |
| 效果： |