R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。 MUGer, hacker, developer, amateur UI designer, punster, Japanese learner.

【教程】不用JS实现鼠标移过的下拉菜单效果

注意:本文发布于 1838 天前,文章中的一些内容可能已经过时。

兼容性:IE≥7(本机无IE6)

难度:简单

说来惭愧,我一直在用JS来写下拉菜单,一直到去年的10月份。前一阵有同学问我能不能不用JS,我想了想,还是有空写一段吧。

【效果演示(可能丑了点)】

效果演示

【实现过程】

首先要知道一点知识:鼠标在子元素上的时候,父元素的:hover是开启的。

先按照一般的思路写好菜单的HTML框架,本例使用ul和li来制作菜单:

<ul>
    <li>菜单</li>
    <li>1</li>
    <li>
        <div>2</div>
        <ul>
            <li>21</li>
            <li>
                <div>22</div>
                <ul>
                    <li>221</li>
                    <li>222</li>
                    <li>223</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>3</li>
</ul>

这样的话,就是默认假设一个ul是一个层级的菜单了。注意:实际开发中不可这么写,至少要加一个.menu来区分这是普通ul还是下拉菜单的ul。

先不管一开始那个ul,我们先实现准备弹出的ul。这个ul一开始应该是display:none的,而且它的overflow应该是hidden,当鼠标移过某个li的时候,li>ul的display应该为block,而这个li所处的ul应该设为overflow:visible,这样li>ul就被显示出来了。

给菜单项设置固定的大小(不固定的话,实现起来会相当有难度吧)和基本的样式:

ul,li{
    width:80px;
    background:#333;
    color:white;
}
ul{
    /* 隐藏ul默认的小圆点和内边距 */
    padding:0;
    list-style:none;
    /* ul一开始是不显示的 */
    display:none;
    overflow:hidden;
    /* 弹出的ul跟父级li同高度看起来才比较正常,所以设置为顶端对齐 */
    vertical-align:top;
    margin-left:80px;
    margin-top:-40px;
}
li{
    /* ul是不用设置高度的,只需要给li设置 */
    height:40px;
    /* 单行文字水平垂直居中对齐 */
    line-height:40px;
    text-align:center;
}

然后考虑如何控制菜单的显示:

ul:hover{
    /* 可以显示子元素了 */
    overflow:visible;
    /* 让显示效果明显一点 */
    background:green;
}
li:hover{
    /* 让显示效果明显一点 */
    background:red;
}
li:hover>ul{
    /* li被hover时,下级ul要露出来 */
    display:block;
}

其实这样已经差不多了,但是还缺最重要的一点:一开始的那个ul没有显示!其实解决方法很简单,我们在外面套个div.nav或者用class来选中这个初始的ul,然后对它进行特殊设置(我用了div.nav):

.nav>ul{
    display:block;
}
.nav>ul{
    margin:0;
    height:40px;
}

大功告成。当然,为了保持跟li同样的高度,我又给div加了个height:40px。

全部代码如下:

【HTML】

<div class="nav">
    <ul>
        <li>菜单</li>
        <li>1</li>
        <li>
            <div>2</div>
            <ul>
                <li>21</li>
                <li>
                    <div>22</div>
                    <ul>
                        <li>221</li>
                        <li>222</li>
                        <li>223</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>3</li>
    </ul>
</div>

【CSS】

div{
    height:40px;
}
ul,li{
    width:80px;
    background:#333;
    color:white;
}
ul{
    margin-top:-40px;
    margin-left:80px;
    padding:0;
    list-style:none;
    display:none;
    overflow:hidden;
    vertical-align:top;
}
li{
    height:40px;
    line-height:40px;
    text-align:center;
}
ul:hover{
    overflow:visible;
    background:green;
}
li:hover{
    background:red;
}
.nav>ul,li:hover>ul{
    display:block;
}
.nav>ul{
    margin:0;
    height:40px;
}
版权声明:除文章开头有特殊声明的情况外,所有文章均可在遵从 CC BY 4.0 协议的情况下转载。
上一篇: 安装HUSTOJ的心得
下一篇: 于是这就算入职了吧

这是我们共同度过的

第 1559 天