形形色色的下拉菜单（课后总结2）
来源：互联网 发布：黑格尔的哲学思想知乎 编辑：程序博客网 时间：2024/05/20 10:56
使用jQuery实现动态下拉菜单
使用jQuery实现动态的下拉菜单是最简单的方法。首先我们先来实现一个二级菜单的HTML部分。
body><div id="menu"> <ul id="nav"> <li class="mainlevel"><span class="note"></span><a href="#"></a>首页</li> <li class="mainlevel" id="mainlevel_01"><a href="#"></a>学习中心 <ul id="sub_nav_01" > <span class="triangle_con"></span> <li>前端</li> <li>后端</li> <li>数据库</li> </ul> </li> <li class="mainlevel" id="mainlevel_02"><a href="#"></a>课程大厅 <ul id="sub-nav_02"> <span class="triangle_con"></span> <li>JavaScript</li> <li>HTML</li> <li>CSS</li> </ul> </li> <li class="mainlevel"><a href="#"></a>经典案例</li> <li class="mainlevel"><a href="#"></a>关于我们</li> </ul></div></body>之后的jQuery部分如下：
<script type="text/javascript"> $(document).ready(function(){ $(".mainlevel").mouseover(function(){ $(this).children("ul").slideDown("slow"); }); $(".mainlevel").mouseleave(function(){ $(this).children("ul").slideUp("slow"); }); }); </script>在这里要注意的是find()函数和children()函数的区别。find()函数是找到所有符合条件的元素，不管是直接孩子还是孙子，还是曾孙子。而children()函数是只找符合条件的直接儿子。
使用JavaScript实现动态的下拉菜单
JavaScript实现动态下拉菜单的HTML部分的代码和jQuery部分是一样的：
body><div id="menu"> <ul id="nav"> <li class="mainlevel"><span class="note"></span><a href="#"></a>首页</li> <li class="mainlevel" id="mainlevel_01"><a href="#"></a>学习中心 <ul id="sub_nav_01" > <!--因为要通过getElementById，所以首先要先为二级的ul设置id--> <span class="triangle_con"></span> <li>前端</li> <li>后端</li> <li>数据库</li> </ul> </li> <li class="mainlevel" id="mainlevel_02"><a href="#"></a>课程大厅 <ul id="sub-nav_02"> <span class="triangle_con"></span> <li>JavaScript</li> <li>HTML</li> <li>CSS</li> </ul> </li> <li class="mainlevel"><a href="#"></a>经典案例</li> <li class="mainlevel"><a href="#"></a>关于我们</li> </ul></div></body>因为要在后来的JS代码中药通过getElementById来获取二级菜单的ul，所以要先为二级菜单设置id。
在实现JS的代码之前，CSS代码中有一点是要注意的：
#nav .mainlevel ul{ display: none; height:0; // 需要把高度初始化设置为0 ，否则后来的AddH函数就无法正常实现 overflow: hidden; }之后的JS的实现代码：
<script type="text/javascript"> window.onload = function(){ //在页面加载完毕的时候动态绑定事件，这样就不用为每一个li都添加一个专门的事件了。 var Lis = document.getElementsByTagName("li"); Lis[0].style.color="white"; for(var i=0;i<Lis.length;i++) { Lis[i].onmouseover = function() { var u =this.getElementsByTagName("ul")[0]; if(u !=undefined){ //首先要判断，因为不是所有的 <li>标签下都是有<ul>标签的，否则浏览器会报错 u.style.display = "block"; //因为在之前的CSS初始化的设置中的，display属性是none，即隐藏的。 AddH(u.id); //调用AddH（）来实现动态的加载。 } } Lis[i].onmouseleave = function(){ var u = this.getElementsByTagName("ul")[0]; if(u !=undefined){ SubH(u.id); //这就是先前要先给二级菜单设置id的原因。 } } } } function AddH(id){ var ulList = document.getElementById(id); var h=ulList.offsetHeight;//offsetHeight?? h+=1; if(h<66){ ulList.style.height =h+"px"; setTimeout("AddH('"+id+"')",10); //每隔一段时间就调用自身函数。 } else return; } function SubH(id){ var ulList = document.getElementById(id); var h=ulList.offsetHeight;//offsetHeight?? h-=1; if(h>0){ ulList.style.height =h+"px"; setTimeout("SubH('"+id+"')",10); } else { ulList.style.display="none"; //和AddH()函数稍微有点区别的就是，在结束了SubH的调用之后要把display设置还原成none return ; } } </script>使用CSS3来实现动态下拉菜单
主体的html部分代码如下,为三级菜单：
<div > <ul class="top-nav"> <li ><a href="#">首页</a></li> <li><a href="#">学习中心</a> <ul> <li><a href="#">JavaScript+</a> <ul> <li><a href="#">123</a></li> <li><a href="#">123</a></li> <li><a href="#">123</a></li> <li><a href="#">123</a></li> </ul> </li> <li><a href="#">JQuery</a></li> </ul> </li> <li><a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">JQuery</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul></div>其中主要用到的CSS3的属性有：
1、 border-radius 实现下拉菜单的圆角属性
2、 box-shadow 实现下来菜单的阴影
3、 background-image 除了可以添加背景图片的url之外，还可以实现渐变的效果
4、 transition 实现动态过渡的效果
5、 这个案例中使用了一些HTML和CSS的小技巧，实现了箭头的小三角的效果
具体的CSS代码如下：
<style type="text/css"> *{ margin:0; padding:0; list-style: none; } .top-nav{ width:960px; margin:60px auto; color:#999999; border:1px solid #222; background-color: #111; background-image: linear-gradient(#444,#111); /*使用线性渐变创建了背景图片*/ border-radius: 6px; /*使用border-radius创建了6px的圆角*/ box-shadow:0 1px 1px #777; /*使用box-shadow 属性为列表创建了阴影*/ padding:0; list-style: none; /*overflow: hidden;*/ /*visibility:和display的效果一样吗;*/ /*???*/ } .top-nav:before , .top-nav:after{ content: " "; display: table; /* 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。/ } .top-nav:after{ clear: both; } /*以上两个属性是为了消除float属性的影响*/ .top-nav >li{ float: left; border-right: 1px solid #222; box-shadow: 1px 0 0 #444; position: relative; list-style: none; } .top-nav li a { float: left; padding:12px 30px; color: #999; font:bold 12px; text-decoration: none; text-shadow: 0 1px 0 #000; } .top-nav li a:hover{ color:#fafafa; } .top-nav li ul{ /*display: none;*/ visibility: hidden; position:absolute; top:38px; left:0; z-index: 100; padding:0; background-color: #444; background-image: linear-gradient(#444,#111); box-shadow:0 -1px 0 rgba(255,255,255,.3); border-radius: 3px; opacity:0; margin:20px 0 0 0; transition:all .2s ease-in-out; } .top-nav li:hover > ul{ /*>是选择子一级的菜单，但是不会选择孙子，曾孙子等之后的ul元素*/ opacity: 1; visibility: visible; margin:0; } .top-nav ul li{ float: none; display: block; border:0; box-shadow: 0 1px 0 #111 ,0 2px 0 #666; /*这个是实现了阴影的叠加*/ } .top-nav ul a { padding:10px; width:130px; display: block; float: none; } .top-nav ul a:hover{ background-color: #0186ba; background-image:linear-gradient(#04acec,#0186ba) ; } .top-nav ul li:first-child > a{ /*选择属于父元素的第一个子元素的每个 <p> 元素。*/ border-radius: 3px 3px 0 0 ; } .top-nav ul li:last-child > a{ border-radius:0 0 3px 3px; } .top-nav ul li:first-child > a:before{ /*before就是在元素之前添加内容*/ /*after就是在元素之后添加内容*/ content:" "; position: absolute; left:40px; top:-6px; /*因为边框三角是6px*/ border-left:6px solid transparent; /*将左右底的边框设置为透明没有颜色，就只剩下顶部的三角了*/ border-right: 6px solid transparent; border-bottom: 6px solid #444; /*以上是实现了箭头三角的代码*/ } .top-nav ul li:first-child > a:hover:before{ border-bottom-color: #04acec; /*为三角设置颜色*/ } .top-nav ul ul{ top:0; left:150px; margin:0 0 0 20px; box-shadow: -1px 0 rgba(255,255,255,.3); } .top-nav ul ul li:first-child a:before{ left:-6px; top:10%; margin-top: -6px; border-left:0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } .top-nav ul ul li:first-child a:hover:before{ border-bottom-color: transparent; /*清除继承过来的属性*/ border-right-color:#0299d3; } </style>难点：
1、为什么要清除浮动？怎么清除浮动？
当所有的子元素都设置了浮动之后，不占据位置，从而导致父元素没有高度，这时候就需要清除浮动。清除浮动就是消除浮动的影响。
清除浮动的方法：
（1）直接给父元素设置高度
（2）给父元素设置overflow：hidden （这里面涉及到BFC）
（3）使用clear：left | right | both
Clear：可以认为设置了clear属性的元素，不能被浮动的元素覆盖
Left：不允许左边有浮动元素
Right：不允许右边有浮动元素
Both：两边都不允许
用clear 属性清除浮动得到的效果不会涉及到别的元素，只对当前设置元素生效
给父元素添加一个子元素 div ，放在最后面，设置clear：both；
使用单伪元素清除浮动（这个方法是必须掌握的）即ClearFix方法
.clearfix:after{ Content：””;(这个属性必须有) Clear:both; Display:block; Visibility:hidden; Height:0; Line-height:0; }Overflow的用法：
Overflow：visible 默认值超出部分可见
Overflow：hidden 将超出部分隐藏
Overflow：scroll 添加滚动条
Overflow：auto 自动设置滚动条
2、使用CSS和HTML实现三角箭头
原理：给一个div设置边框，
border-top:6px solid color1;
border-right:6px solid color2;
border-bottom:6px solid color3;
border-right:6px solid color4;
div 有内容时
div 没内容时
这时，如果把不需要的三角的颜色设置成transparent透明，就可以实现只剩下一个三角的效果了。
3、display和visibility的区别
display通常可以设置为none、inline、block
visibility通常可以设置为hidden、visible
当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。
display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。
visibility属性是隐藏元素但保持元素的浮动位置，即仍然占据原来的位置，而display实际上是设置元素的浮动特征。
当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<div>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<div>一样工作。
将display设置为inline，将使其行为和元素inline一样—即使它是普通的块元素如<div>，它也将会被组合成像<span>那样的输出流。
display被设置：none，这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。（此时应用display: none;的元素相当于消失，而visibility: hidden;则只表示隐藏，位置还在。）
课程代码：LinQuQu_github
- 形形色色的下拉菜单（课后总结）
- 形形色色的下拉菜单（课后总结2）
- 形形色色的下拉菜单（课后总结3）
- 形形色色的自定义消息（上）
- 形形色色的自定义消息（下）
- 形形色色的自定义消息（下）
- 形形色色的自定义消息（上）
- jQuery 下拉菜单操作总结
- 形形色色的软件生命周期模型（2）——进化型、原型
- 形形色色的发明创造
- 形形色色的自定义消息
- 形形色色的指针
- 国外形形色色的“母亲节”
- 形形色色的计算机语言
- 打造形形色色的进度条
- Android 形形色色的进度条
- 下拉菜单（利用的onchange事件）
- 简单的二级下拉菜单（转）
- 有关JavaScript中浅拷贝、深拷贝的简单研究
- 未知：选择困难症——题解+优先队列
- 当你打开一个网站的时候，都发生了什么
- typeof
- 51nod 1058 阶乘的位数
- 形形色色的下拉菜单（课后总结2）
- 递归查询Sdcarad文件中的音乐,图片类同
- 轻松解决keil4跟keil5在同一个系统下不能共存的问题
- 使用JDK wsimport命令生成webservice客户端
- 1056. Mice and Rice 解析
- PAT 1048数字加密
- UnsatisfiedDependencyException
- What Kind of Friends Are You?
- java随机数生成函数
