下拉菜单的四种实现方式

妖狐艹你老母 2022-05-17 03:06 193阅读 0赞

![这里写图片描述][70]  
今日在做下拉菜单时思考实现下拉菜单的几种实现方式，现在对这几种实现方式进行总结。

## 1：改变下拉菜单的display ##

/*HTML结构，以下四种方法通用*/
    <div id="container">
        <ul id="con_ul" class="cleanfix">
            <li>首页</li>
            <li>关于我们</li>
            <li>
                新闻中心
                <ul id="drop">
                    <li><a href="">最新动态</a></li>
                    <li><a href="">视频中心</a></li>
                    <li><a href="">媒体报道</a></li>
                    <li><a href="">热点专题</a></li>
                    <li><a href="">媒体资料库</a></li>
                </ul>
            </li>
            <li>苏宁产业</li>
            <li>社会责任</li>
            <li>联系我们</li>
        </ul>
    </div>

/*css样式，以下四种方法只是将改动部分进行展示*/
    #con_ul > li:hover{
                background-color: blue;
            }
            #drop{
                display: none;
                width: 120px;
                height:auto;
            }
            #drop > li{
                height: 30px;
                line-height: 30px;
                background-color: gray;
                list-style: none;
                text-align: left;
                padding-left: 20px;
            }
            #drop > li a{
                color: white;
                text-decoration: none;
            }
            #con_ul > li:nth-child(3):hover #drop{
                display: block;
            }

![这里写图片描述][70 1]  
实现结果如图所示；嵌套在父元素li中的ul下拉菜单在调整好样式之后设置display：none；表示盒子框的样式为不显示。在伪类样式中添加display:block，表示当鼠标移动到此li上时，下拉菜单以block的形式进行显示。这就达到了下拉菜单的显示效果。

## 2：改变透明度opacity ##

#drop{
                width: 120px;
                height:auto;
                opacity: 0;
            }
     #con_ul > li:nth-child(3):hover #drop{
                opacity: 1;
            }

**分析：**和改变display相类似，首先设计好样式之后为元素添加透明度为0，设置透明状态，在伪类中添加透明度opacity：1；即可将显示出下拉菜单。

## 3：使用绝对定位 ##

/*主要css代码（其他部分和上边一样）*/
    #con_ul > li{
                float: left;
                height: 50px;
                width:100px;
                line-height: 50px;
                text-align: center;
                position: relative;
            }
            #drop{
                width: 120px;
                height:auto;
                position: absolute;
                left:-800px;
            }
            #con_ul > li:nth-child(3):hover #drop{
                left:auto;
            }

同样实现效果；  
分析：首先给下拉菜单的父元素li设置一个relative的position，将下拉菜单整体进行绝对定位，left为负值将下拉菜单偏出html结构显现不出来，之后在hover伪类中将left设置为auto，鼠标移动到li时会使下拉菜单与同级元素进行自动定位达到左端对齐的效果。（left：0也可以。）

## 4：下拉菜单height设置为0 ##

/*部分主要代码*/
    #con_ul > li{
                float: left;
                height: 50px;
                width:100px;
                line-height: 50px;
                text-align: center;
            }
       #drop{
                width: 120px;
                height:0;
                overflow: hidden;
            }
    #con_ul > li:nth-child(3):hover #drop{
                height: 150px; /*height: auto;*/
            }

![这里写图片描述][70 2]  
简单的画了一个图来解释一下：在上边的代码中li的高度为50px，而标题中的内容的行高line-height也设置为50px。父元素的高度已经固定，并且被标题内容“新闻中心”填满。所以**此时下拉菜单的显示原理为溢出父容器li**。首先将下拉菜单的高度height设置为0px；并且增加overflow：hidden；此时下拉菜单被隐藏起来。在hover伪类中添加height：auto或者是固定高度；即可将下拉菜单在鼠标移动过去时显示出来。  
**注意：**有几个重点  
1：要明白当父容器的height为显式高度时此时下拉菜单的显示原理为溢出父容器；  
2：因为下拉菜单的height要设置为0px，所以一定要加上overflow：hidden；  
3：在伪类中使用height：auto和height：显式高度，在添加过渡效果的时候会产生不一样的渲染效果。

**拓展思考**  
如果将父元素li的高度设置为auto。会有什么不同。

#con_ul > li{
                float: left;
                height:auto;/*重点*/
                width:100px;
                line-height: 50px;
                text-align: center;
            }

**分析：**在博客《width和height的100%和auto的区别以及height：100%无效的场景》中分析得到，只要包含块的高度没有显式指定，那么height:100%会当成auto解释；所以无论你子元素怎么去增加，父元素都会包裹住你的高度，不会溢出，  
此时**下拉菜单的实现原理是：撑开父容器li**，只是改变了一个属性就造成实现原理的不同！  
而且根据实验，这两种实现方式在添加过渡效果时将会造成一些有趣的色彩叠加现象，我会在接下来的博客中对这一现象做出一些猜想和总结。

--------------------

## 最后的总结 ##

1：display属性和opacity属性相对简单；  
2：使用绝对定位要对直接父元素进行相对定位；  
3：下拉菜单父元素的高度是auto还是显式高度，他两种的实现原理是截然不同的。  
4：注意总结方法，注意不同的场景，加油！

[70]: /images/20220517/d17acf46968b4147b721b002d501bfc1.png
[70 1]: /images/20220517/d269eb77bc2241ccadf4bd5371e1f88a.png
[70 2]: /images/20220517/4ddcd60850cc4d50bc18672450cb8441.png