CSS和JavaScript实现右拉菜单

来源：互联网发布：起名网络中国编辑：程序博客网时间：2024/04/30 22:42

<!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>  <!--编写JS代码-->    <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进行操作，既减少了代码量，又使代码简单易懂。

0 0