二级菜单不同方法的实现
之前面试的时候被问到过一次,后来,在笔试的时候又遇到了,为了长点记性,就决定把这个好好写写。
第一种:
第一种是采用css来控制的;主要采用float,和position,display,hover来完成的。具体看以参看后面的源代码。
第二种:
主要采用hover,和display来实现的。
第三种:
采用的是js来控制的,mouseover,mouseout来控制显示的。当然也利用了css.
第四种:
这种也是纯css的形式,主要利用display:inline-block;和vertical-align:top;来实现的。如果不用vertical-align的话,就会导致一级菜单被二级菜单顶起来,使得上面无法对其,因此才需要设置。
每一种对应的源码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>横排二级下拉菜单</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; text-decoration: none; color: #333; } .nav{ width: 400px; height: 150px; background: Gray; margin: 10px; overflow: hidden; } .nav ul li{ float :left; width: 100px; clear: right; } .nav ul li a:hover{ color:red; } .nav ul li ul { display:none; } .nav ul li:hover ul{ display:block; position: absolute; } .nav ul li:hover ul li{ float:none;/**/ } /********************************************************/ .nav2{ width: 400px; height: 200px; background: Gray; margin: 10px; } .nav2 ul li{ width: 100px; } .nav2 ul li li{ margin-left:20px; } .nav2 a:hover{ color: red; } .nav2 ul li ul { display: none; } .nav2 ul li:hover ul { display: block; } /********************************************************/ .nav3{ width: 400px; height: 150px; background: Gray; margin: 10px; } .nav3 ul li{ width: 100px; float: left; } .nav3 ul li ul{ display: none; position: absolute; } .nav3 ul li ul li{ float: none; } .nav3 ul li a:hover{ color:red; } /********************************************************/ .nav4{ width: 400px; height: 200px; } .nav4 ul li{ width:100px; display: inline-block; vertical-align: top; } .nav4 ul ul{ display: none; } .nav4 ul li:hover ul{ display: block; } .nav4 ul li a:hover{ color:red; } </style> </head> <body> <!--*****************111111111111111111111111111111111111***************/--> <div class="nav"> <ul> <li><a href="#">栏目一</a> <ul> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> </ul> </li> <li><a href="#">栏目二</a> <ul> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> </ul> </li> <li><a href="#">栏目三</a> <ul> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> </ul> </li> </ul> </div> <!--*****************22222222222222222222222222222222222***************/--> <hr> <div class="nav2"> <ul> <li><a href="#">栏目一</a> <ul> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> </ul> </li> <li><a href="#">栏目二</a> <ul> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> </ul> </li> <li><a href="#">栏目三</a> <ul> <li><a href="#">二级栏目1</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目3</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> </ul> </li> </ul> </div> <!--*****************333333333333333333333333333333333333***************/--> <hr> <div class="nav3"> <ul> <li class="row"><a href="#">栏目一</a> <ul> <li><a href="#">二级栏目1</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目3</a></li> <li><a href="#">二级栏目</a></li> </ul> </li> <li class="row"><a href="#">栏目二</a> <ul> <li><a href="#">二级栏目1</a></li> <li><a href="#">二级栏目2</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> </ul> </li> <li class="row"><a href="#">栏目三</a> <ul> <li><a href="#">二级栏目1</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目3</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> </ul> </li> </ul> </div> <!--*****************44444444444444444444444444444444***************/--> <hr> <div class="nav4"> <ul> <li><a href="#">栏目一</a> <ul> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> </ul> </li> <li><a href="#">栏目二</a> <ul> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> </ul> </li> <li><a href="#">栏目三</a> <ul> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> <li><a href="#">二级栏目</a></li> </ul> </li> </ul> </div> <script> var row=document.getElementsByClassName("row"); var length=row.length; for(var i=0;i<length;i++){ row[i].onmouseover=function(i){ var that=row[i]; return function(i){ child=that.childNodes; child[2].style.display="block"; } }(i); row[i].onmouseout=function(i){ var that=row[i]; return function(i){ child=that.childNodes; child[2].style.display="none"; } }(i); } console.log(row); </script> </body> </html>
树林美丽、幽暗而深邃,但我有诺言尚待实现,还要奔行百里方可沉睡。 -- 罗伯特·弗罗斯特