css+html+js实现多级下拉和弹出菜单
本文将使用css+html+js实现横向菜单。具有多级弹出菜单下拉。
首先我们来看看效果图:
首先应该写html部分的代码,代码比較简单,代码例如以下:
<body> <div > <ul> <li><a href="#" >首页</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 > <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的代码,代码中都有凝视,方便阅读和理解:
完毕上面的步骤后,能够进行測试了,你会发现,上面的代码仅仅在谷歌浏览器能够操作正常。能够实现下拉菜单。可是在ie和其它的浏览器,不能正常使用下拉菜单,浏览器不兼容引起的,所以为了写出兼容全部浏览器的菜单,还需js代码的控制。js代码例如以下;
" ": "") + "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代码没有去掉,主要是方便调试