CSS和JavaScript实现右拉菜单

深碍√TFBOYSˉ_ 2022-07-15 08:36 142阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>右拉菜单</title>
           <style type="text/css">
            body
            {
                margin:0;
    	    padding: 0;
            }
            .main
            {
                display: block;
                width: 80px;
                border: 2px solid #e4393c;
                margin: 0;
                padding: 0;
            }
            .main li
            {
                height: 30px;
                line-height: 30px;
                font-size: 11pt;
                list-style-type: none;
                text-align: left;
                padding-left: 8px;
                z-index: 3;
            }
            .main li a
            {
                text-decoration: none;
                color: #313131;
            }
            .main li a:hover
            {
                text-decoration: underline;
                font-weight: bold;
                color: #e4393c;
            }
            .main .lihover /*鼠标移动到上面时，应用的样式*/
            {
                border: 1px solid #DDD;
                border-right: 0;
                box-shadow: 0 0 8px #DDD;
                
                -moz-box-shadow: 0 0 8px #DDD;
                -webkit-box-shadow: 0 0 8px #DDD;
                background-image: none;
                height:30px;
                border-left:4px solid #e4393c;  
            }
             .main .lihover .submenu /*悬浮层*/
            {
                display: block;
            } 
            .submenu
            {
                display: none;
                width: 80px;
                left: 80px;
                position: absolute;
                top: 10px;
                border: 1px solid #DDD;
                z-index: 4;
                background: white;
                box-shadow: 0 0 8px #DDD;
                -moz-box-shadow: 0 0 8px #DDD;
                -webkit-box-shadow: 0 0 8px #DDD;
            }
            .submenu a
            {
                display: block;
                color: #737373;
                font-size: 9pt;
                padding: 0 8px;
                height: 14px;
                line-height: 14px;
                margin: 4px 0;
            }
        </style>
    </head>
    <body> 
     
        <script type="text/javascript">
            window.onload = function () {
           var Lis = document.getElementsByTagName("li");
                for (i = 0; i < Lis.length; i++) {
                    Lis[i].i = i;
    
                   //设置鼠标移入时的样式。
                    Lis[i].onmouseover = function () {
                        this.className = "lihover";
    					var h0=(this.i-1)*30+35;
    					var y=this.getElementsByTagName("div")[0].offsetHeight;
    					var h=this.getElementsByTagName("div")[0].style.top+y;
    					if(h<h0){
    						this.getElementsByTagName("div")[0].style.top=h0+"px";
    						}	
                    }
                      //设置鼠标移开时的样式为空。
                    Lis[i].onmouseout = function () {
                        this.className = "";
                    }
    
                }
            }
        </script>
        <ul class="main">
            <li><a href="#">春季</a><span></span> 
    		
                <div class="submenu">
    		<a href="#">一月</a>
                     <a href="#">二月</a> 
    		 <a href="#">三月</a>    
                 </div>
    			
            </li>
    	<li><a href="#">夏季</a>
    	<span>	</span> <div class="submenu">
    			<a href="#">四月</a>
                      <span>	</span><a href="#">五月</a> 
    		<span>	</span><a href="#">六月</a>    
                     </div>
    	</li>
            <li><a href="#">秋季</a>
    		<div class="submenu">
    		<span>	</span><a href="#">七月</a>
                             <a href="#">八月</a> 
    		<span>	</span><a href="#">九月</a>    
                 </div>
    	</li>
            <li><a href="#">冬季</a>
    		<div class="submenu">
    			 <a href="#">十月</a>
                              <a href="#">十一月</a> 
    			  <a href="#">十二月</a>    
                 </div>
    	</li> 
        </ul>
    </body>
    </html>

注意：

1.本来只用CSS就可以实现上述功能，使用 .topmenu li:hover和.topmenu li:hover .submenu完全可以实现右拉菜单的隐藏和展开，但为了兼容各大浏览器，还是使用了JavaScript。

2.可以通过给<a>标签添加border-left来实现两个链接之间的分隔线，不用设置图片等。

3.若一个模块只有一个ul（列表），不用设置div，直接对ul进行操作，既减少了代码量，又使代码简单易懂。