css+html+js实现多级下拉和弹出菜单

本文将使用css+html+js实现横向菜单。具有多级弹出菜单下拉。

首先我们来看看效果图:

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代码没有去掉,主要是方便调试