首页 > 代码库 > 菜单的那些事儿（一）
菜单的那些事儿（一）
菜单的那些事儿（一）
首先呢，先做简单的二级导航菜单，在这里，我们用伪类的方法来实现鼠标点击出现二级菜单的效果，代码如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>demo1</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } body{ font-size: 24px; } #nav{ width: 600px; height: 40px; background-color: #eee; margin: 0 auto; } ul li{ line-height: 40px; text-align: center; float: left; position: relative; } a{ display: block; text-decoration: none; padding: 0 10px; color: #000; height: 40px; } a:hover{ color: #fff; background-color: #000; } ul li ul li{ float: none; /*在这里注意float：none和clear的区别*/ background-color: #eee; margin-top: 2px; } ul li ul{ position: absolute; left: 0; top: 40px; display: none; } ul li:hover ul{ display: block; } </style> </head> <body> <div id="nav"> <ul> <li><a href="http://www.mamicode.com/#">首页</a></li> <li><a href="http://www.mamicode.com/#">课程大厅</a> <ul> <li><a href="http://www.mamicode.com/#">HTML</a></li> <li><a href="http://www.mamicode.com/#">CSS</a></li> <li><a href="http://www.mamicode.com/#">Javascript</a></li> <li><a href="http://www.mamicode.com/#">JQuery</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#">学习中心</a></li> <li><a href="http://www.mamicode.com/#">经典案例</a></li> <li><a href="http://www.mamicode.com/#">关于我们</a></li> </ul> </div> </body></html>在这里，我们还是要注意一下，在中间的注释部分，特意强调了float：none和clear的区别；另外，hover方法对于低版本的ie浏览器兼容不太好，在这里，我们可以通过Javascript或是jquery方法来兼容低版本的ie浏览器。
Javascript方法：
首先，我们要在课程大厅的li标签上加上方法，<li onm ouseover="showsubmenu(this)" onm ouseout="hiddensubmenu(this)">，Javascript代码如下
<script type="text/javascript"> function showsubmenu(li){ var submenu = li.getElementsByTagName(‘ul‘)[0]; submenu.style.display = ‘block‘; } function hiddensubmenu(li){ var submenu = li.getElementsByTagName(‘ul‘)[0]; submenu.style.display = ‘none‘; }</script>我们分别定义了两个函数，先使用DOM方法获得li标签的第一ul标签，然后进行相应的操作。
下面我们再看一看jquery方法：（注意：在使用前需要引入jquery，由于）
<script type="text/javascript"> //这种使用的是jquery方法，在使用前需要引入jquery $(document).ready(function(){ $(‘.submenu‘).mouseover(function(){ $(this).children("ul").show(); }); $(‘.submenu‘).mouseout(function(){ $(this).children("ul").hide(); }); }); </script>接下来，我们要对我们菜单进行一点升级改造，我们想要鼠标经过的时候，导航菜单进行中英文切换，代码如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>demo2</title> <style type="text/css"> .top-nav { font-size: 12px; font-weight: bold; list-style: none; border-bottom: 8px solid #DC4E1B; overflow: auto; } .top-nav li { float: left; margin-right: 1px; } .top-nav li a { line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; } /*设置正常状态英文菜单隐藏*/ .top-nav li a span{ display: none; } /*鼠标移动到链接上面时将英文菜单显示*/ .top-nav li:hover span{ display: block; } /*鼠标移动到链接上面时将中文菜单位置上移*/ .top-nav li:hover{ margin-top: -20px; } </style> </head> <body> <ul class="top-nav"> <li><a href="http://www.mamicode.com/#">首页<span>Home</span></a></li> <li><a href="http://www.mamicode.com/#">课程大厅<span>Course</span></a></li> <li><a href="http://www.mamicode.com/#">学习中心<span>Learn</span></a></li> <li><a href="http://www.mamicode.com/#">关于我们<span>About</span></a></li> </ul> </body></html>下面，我们利用前面的基础继续对我们的菜单进行升级改造，我们用前面的基础做一个简单的三级菜单，代码如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>demo3</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } ul{ list-style: none; } .top-nav { font-size: 12px; font-weight: bold; list-style: none; } .top-nav li { float: left; margin-right: 1px; position: relative; } .top-nav li a { line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; } .top-nav li a:hover { background-color: darkred; color: white; } .top-nav li ul{ display: none; } .top-nav li:hover ul{ display: block; width: 80px; position: absolute; top: 20px; left: 0px; } .top-nav li:hover ul li ul{ display: none; } .top-nav li ul li:hover ul{ display: block; width: 80px; position: absolute; top: 0px; left: 80px; } </style> </head> <body> <ul class="top-nav"> <li><a href="http://www.mamicode.com/#">首页</a></li> <li><a href="http://www.mamicode.com/#">课程大厅</a></li> <li><a href="http://www.mamicode.com/#">学习中心 +</a> <ul> <li><a href="http://www.mamicode.com/#">后台课程</a></li> <li><a href="http://www.mamicode.com/#">手机开发</a></li> <li><a href="http://www.mamicode.com/#">前端课程 +</a> <ul> <li><a href="http://www.mamicode.com/#">HTML</a></li> <li><a href="http://www.mamicode.com/#">CSS</a></li> <li><a href="http://www.mamicode.com/#">JavaScript</a></li> </ul> </li> </ul> </li> <li><a href="http://www.mamicode.com/#">关于我们</a></li> </ul> </body></html>下面介绍Javascript方法，在前面的二级菜单中，我们是在li标签中添加了两个事件，聪敏的你肯定发现了，那样做需要改动的方法太多了，下面我们对之前的方法进行改进，代码如下：
<script type="text/javascript"> window.onload = function(){// var isIE = !!window.ActiveXObject;// var isIE6 = isIE && !window.XMLHttpRequest;// if(isIE6){ 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‘; } }; Lis[i].onmouseout = function(){ var u = this.getElementsByTagName(‘ul‘)[0]; if(u !== undefined){ u.style.display = ‘none‘; } }; } }// } </script>（要是想兼容ie6，去掉注释就行了），用这种方法我们不需要对html代码进行任何操作，直接引进html内容就行了。另外if(u !== undefined)此段代码判断了若li下面的第一个ul标签存在时，则执行，不加此判断会报错。
下面是jquery方法：
$(document).ready(function(){ if($.browser.msie && $.browser.version.substr(0,1)<7){ $("li").has(‘ul‘).mouseover(function(){ $(this).children(‘ul‘).css(‘display‘,‘block‘) }).mouseout(function(){ $(this).children(‘ul‘).css(‘display‘,‘none‘) }); } });经常我们看到的鼠标放在一级菜单上，二级菜单是有动画效果的，哟ucss3基础的，做出动画效果很简单，但是大家都知道，css3对于低版本的兼容不是太好，接下来我们先用css3的方法做简单的动画效果，我们会尽可能的使用css3中的新方法，代码如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>demo4</title> <style type="text/css"> *{ margin: 0; padding: 0; text-decoration: none; list-style: none;} a{color: #000;background-color: #eee;} a:hover{color: #fff;background-color: aqua;} /**/ .top-nav{width: 450px;height: 40px;font-size: 24px;line-height: 40px;text-align: center;margin: 0 auto;position: relative;} .top-nav li{float: left;} .top-nav li a{display: block;width: 100px;margin-right: 2px;} .top-nav li ul{position: absolute;top: 50px;left: 0;} /*.top-nav li li{float: none;margin-top: 2px;}*/ .top-nav li ul{display: none;} .sjx{display:block; width:0; height:0; border-width:0 10px 10px; border-style:solid; border-color:transparent transparent #eee; position:absolute; } .one{top:-10px; left:140px;} .two{top:-10px; left:240px;} /*.top-nav li:hover ul{display: block;}*/ </style> </head> <body> <ul class="top-nav"> <li><a href="http://www.mamicode.com/#">首页</a></li> <li><a href="http://www.mamicode.com/#">课程大厅</a> <ul> <span class="sjx one"></span> <li><a href="http://www.mamicode.com/#">HTML</a></li> <li><a href="http://www.mamicode.com/#">CSS</a></li> <li><a href="http://www.mamicode.com/#">JavaScript</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#">学习中心</a> <ul> <span class="sjx two"></span> <li><a href="http://www.mamicode.com/#">后台课程</a></li> <li><a href="http://www.mamicode.com/#">手机开发</a></li> <li><a href="http://www.mamicode.com/#">前端课程</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#">关于我们</a></li> </ul> </body></html>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>demo5</title> <style type="text/css"> /*通用基础样式*/ *{margin: 0;padding: 0;list-style: none;text-decoration: none;} body{font: 18px "微软雅黑";} a{color: #963;font-weight: bold;} a:hover{color: #fff;text-shadow: 0 4px 2px #963;background-image: linear-gradient(#111,#444);} ul{background-color: #111;background-image: linear-gradient(#444,#111);border-radius: 5px;box-shadow: 1px 0 0 #444;} /*一级菜单*/ .top-nav{width: 900px;height: 40px;box-shadow: 0 1px 1px #777;margin: 0 auto;} .top-nav li{float: left;line-height: 40px;text-align: center;border-right: 1px solid #444;position: relative;} .top-nav li:last-child{border-right-style: none;} .top-nav li a{display: block;width: 100px;padding: 0 10px;} /*二级菜单*/ /*.top-nav li ul{display: block;}*/ .top-nav li ul{float: none;position: absolute;top: 38px;left: 0;z-index: 2;} .top-nav li ul{opacity: 0;margin: -100px 0 0 0;transition: all .2s ease-in-out;} .top-nav li:hover>ul{opacity: 1;margin: 0;} .top-nav ul li{border: 0;box-shadow: 0 2px 2px #000;} .top-nav ul li:first-child{border-radius: 3px 3px 0 0;} .top-nav ul li:last-child{border-radius: 0 0 3px 3px;} /*三级菜单*/ .top-nav ul ul{position: absolute;top: 0;left: 118px;z-index: 4;} .top-nav ul ul{opacity: 0;margin: 0 0 0 -100px;transition: all .2s ease-in-out;} .top-nav li li:hover>ul{opacity: 1;margin: 0;} /*三角效果的实现*/ .top-nav ul li:first-child a:before{ content: ""; display: block; position: absolute; left: 50px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid aqua; } .top-nav ul ul li:first-child a:before{ content: ""; display: block; position: absolute; left: -12px; top: 17px; border-top: 6px solid transparent; border-right: 6px solid aqua; border-bottom: 6px solid transparent; } </style> </head> <body> <ul class="top-nav"> <li><a href="http://www.mamicode.com/#">首页</a></li> <li><a href="http://www.mamicode.com/#">课程大厅</a></li> <li><a href="http://www.mamicode.com/#">学习中心</a> <ul> <li><a href="http://www.mamicode.com/#">后台课程</a></li> <li><a href="http://www.mamicode.com/#">手机开发</a></li> <li><a href="http://www.mamicode.com/#">前端课程</a> <ul> <li><a href="http://www.mamicode.com/#">HTML</a></li> <li><a href="http://www.mamicode.com/#">CSS</a></li> <li><a href="http://www.mamicode.com/#">JavaScript</a></li> </ul> </li> </ul> </li> <li><a href="http://www.mamicode.com/#">关于我们</a></li> </ul> </body></html>在上那个面的例子中，css3新增的很多方法都有使用到，但是在低版本的浏览器中，我们应该如何去实现我们想要的动画效果呢？拿demo4来说，我们可以在代码中添加如下的Javascript代码：（在这之前我们需要给需要的li标签加上id，还需要在css代码中添加.top-nav li ul{height: 0;overflow: hidden;}）
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"; AddH(u.id); } }; Lis[i].onmouseleave = function(){ var u = this.getElementsByTagName("ul")[0]; if(u!=undefined){ u.style.display = "none"; SubH(u.id); } }; } } function AddH(id){//缓慢增加高度 var ulList = document.getElementById(id); var h = ulList.offsetHeight; h += 1; if(h<49){ ulList.style.height = h + "px"; setTimeout("AddH(‘"+id+"‘)",10); }else{ ulList.style.height = 50 + "px"; } } function SubH(id){//缓慢减少高度 var ulList = document.getElementById(id); var h = ulList.offsetHeight; h -=1; if(h>0){ ulList.style.height = h + "px"; setTimeout("SubH(‘"+id+"‘)",10); }else{ ulList.style.height = 0 + "px"; } }聪明的你也肯定看出了，我们可以对上面的代码进行一定程度的优化
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 = "none"; ChangeH(u.id,-1); } }; } } function ChangeH(id, count) { // 根据ID找到ulList，同时得到其高度 var ulList = document.getElementById(id); var h = ulList.offsetHeight; h += count; if (count > 0) { if (h <= 42) { // 将高度赋值给ulList，同时，不断调用本函数 ulList.style.height = h + "px"; setTimeout("ChangeH(‘" + id + "‘,1)", 10); } else { return; } } else { if (h > 0) { // 将高度赋值给ulList，同时，不断调用本函数 ulList.style.height = h + "px"; setTimeout("ChangeH(‘" + id + "‘,-1)", 10); } else { ulList.style.display = "none"; return; } } }小结：这两天的学习，虽然说学习的新东西不多，但是加深之前对于一些概念的理解，然我对前面的一些只是进行了回顾。比如说在设置菜单横向排列的时候用到的浮动float，后面又需要对浮动进行清除clear，或者说我们有时候还可以用overflow进行清除，到底什么时候该用哪种方法？优势在哪里，这些都是我们需要考虑到的。有时候这样还是不能得到我们想要的效果，我们就要对其position进行思考了，到底是应该用相对定位还是绝对定位，或者说我们有时候会用到固定定位。以前的话可以觉得：hover伪类只用在a标签上，后面才发现原来不是那么回事，后面的css3中它对其他标签也是可以使用的，在高版本的浏览器中会得到我们想要的效果，但是在低版本的ie浏览器中并不是那么支持，在考虑兼容的方法时，我们就需要用到Javascript或是jquery来帮助我们了，说道这两个，感觉有点倾向于jquery，毕竟这是前辈们画了好多时间和精力完成的，他们考虑的问题肯定比自己编写Javascript代码考虑的问题多，然后使用起来，感觉比Javascript简单，所使用的代码量也少了好多。下面说说Javascript里面用到的知识点：DOM方法，for循环，简单的数组（都算不上吧），判断，setTimeout函数的使用……这些东西前面自己都学过，但是用起来，在没学之前，是肯定不知道这个还能这么用的。后面使用的css3就更神奇了，用短短的代码就能实现Javascript或是jquery很多代码才能完成的工作，真的很神奇。慢慢的对这些东西越来越有种说不出的感觉了。
（多点思考，多点总结，慢慢的将前面的知识融会贯通，然后还要对前面的有所突破）
后面的时间我想一边学习jquery一边做点东西，做出有效果的页面真的是件很有趣的事！
Just do it！
菜单的那些事儿（一）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。