css+html+js实现多级下拉和弹出菜单
本文将使用css+html+js实现横向菜单。具有多级弹出菜单下拉。
首先我们来看看效果图:
首先应该写html部分的代码,代码比較简单,代码例如以下:
<body> <div id="menu"> <ul> <li><a href="#" id="current">首页</a></li> <li><a href="#">网页版式</a> <ul> <li><a href="#">自适应宽度</a></li> <li><a href="#">固定宽度</a></li> </ul> </li> <li><a href="#">web教程</a> <ul> <li><a href="#">新手入门</a></li> <li><a href="#">视频教程</a></li> <li><a href="#">常见问题</a></li> </ul> </li> <li><a href="#">web实例</a></li> <li><a href="#">经常使用代码</a></li> </ul> </div> <div id="s1"> <ul> <li><a href="#">软件project</a> <ul> <li><a href="#">java ee</a></li> <li><a href="#">c</a></li> </ul> </li> <li><a href="#">程序语言</a> <ul> <li><a href="#">android</a></li> <li><a href="#">java</a></li> </ul> </li> </ul> </div> </body>
接着写css的代码,代码中都有凝视,方便阅读和理解:
<style type="text/css"> body { font-family: Verdana; /* 字体*/ font-size: 12px; /* 字体大小*/ line-height: 1.5; /*行高 */ } a { color: #000; /* 正常时的颜色 */ text-decoration: none; /*取消下划线 */ } a:hover { color: #F00; /* 鼠标经过时显示的颜色 */ } #menu { width:500px; /* div的宽度 */ height:28px; /* 高度 */ margin:0 auto; /* 水平居中 */ border-bottom:3px solid #E10001;/*设置底端线 */ } #menu ul { list-style: none; /* 取消列表样式 */ margin: 0px; /*外边距为0 */ padding: 0px; /*内边距为0 */ } #menu ul li { float:left; /* 水平浮动 */ margin-left:2px;/*左边外边距为2px */ } #menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(./m14.jpg) 0 0 no-repeat; font-size:14px; } #menu ul li a:hover { background:url(./m13.jpg) 0 0 no-repeat; } #menu ul li a#current { background:url(./m12.jpg) 0 0 no-repeat; font-weight:bold; color:#fff; } #menu ul li ul { border:1px solid #ccc; display:none; position:absolute; } #menu ul li ul li { float:none; width:87px; background:#eee; margin:0; } #menu ul li ul li a { background:none; } #menu ul li ul li a:hover { background:#333; color:#fff; } #menu ul li:hover ul { display:block; } #menu ul li.sfhover ul { display:block; } #s1{ background-color: pink; width:180px; border:2px solid red; position:relative; left:200px; top:190px; height:60px; } #s1 ul li{ list-style-type: none; height:25px; width:50px; background-color: #0ff; float:left; margin:10px; } #s1 ul li ul{ display:none; position:absolute; } #s1 ul li:HOVER ul{ display:block; background-color: blue; margin:0px; padding:0px; /* width:100px; */ } #s1 ul li.sfhover ul { display:block; margin:0px; padding:0px; } #s1 ul li ul li{ border:1px solid red; float:none; margin:0px; width:50px; } </style>
完毕上面的步骤后,能够进行測试了,你会发现,上面的代码仅仅在谷歌浏览器能够操作正常。能够实现下拉菜单。可是在ie和其它的浏览器,不能正常使用下拉菜单,浏览器不兼容引起的,所以为了写出兼容全部浏览器的菜单,还需js代码的控制。js代码例如以下;
<script type="text/javascript"> function menuFix() { var sfEls = document.getElementById("menu").getElementsByTagName("li"); var sfEls2 = document.getElementById("s1").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; }; sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0?" ": "") + "sfhover"; }; sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; }; sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); }; } for (var i=0; i<sfEls2.length; i++) { sfEls2[i].onmouseover=function() { this.className+=(this.className.length>0?
" ": "") + "sfhover"; }; sfEls2[i].onMouseDown=function() { this.className+=(this.className.length>0?
" ": "") + "sfhover"; }; sfEls2[i].onMouseUp=function() { this.className+=(this.className.length>0?
" ": "") + "sfhover"; }; sfEls2[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); }; } } window.onload=menuFix; </script>
如今就能够执行正常了,会出现本文開始显示的效果,因为是做測试的,所以有些css代码没有去掉,主要是方便调试