CSS3二级菜单缓慢下拉效果

2020-06-19

原创字数统计: 942 | 阅读时长: 5分

GIF20200619

H5都结课了，谁知道居然还有实验报告ლ(ٱ٥ٱლ)。

这个好像之前上课没认真听，补一下。
大致思路是，利用父元素的transition属性和overflow:hidde结合其hover(鼠标悬停状态下)height的变化，实现缓慢下拉的效果。
值得注意的是，这里为什么不用display的none和block切换，因为这样会让transition失效。

完整代码如下（核心在48~56行）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS3二级菜单缓慢下拉效果</title>
<style>
    *{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    body{  
        background: cornsilk;
    }
    a{
        text-decoration: none;
    }
    .nav{
        display: flex; /*纯粹为了让元素横着排列*/
        justify-content: space-between;
        width: 500px;
        height: 50px;
        margin: 50px auto;
    }
    .nav li{     
        width: 150px;
        height: 50px;
        margin-right: 10px;
        background-color: greenyellow;
        line-height: 50px;
        text-align: center;
    }
    
    .nav li a{
        display: block;
        width: 100%;
        height: 100%;
        color: #795548;
        font-size: 20px;
    }
    .nav li a:hover{
        background-color: #FFC107;
    }
    .nav > li:nth-child(2){
        position: relative;
    }
    #list{
        position: absolute;
        overflow: hidden;
        height:0;   /*配合overflow：hidden，为了一开始把子元素隐藏*/
        transition: 1s;
    }
    .nav > li:nth-child(2):hover #list{
        height: 200px; /*上级元素鼠标悬停时显示出来*/
    }
</style>
</head>
<body>
    <ul class="nav">
        <li><a href="">一级标题</a></li>
        <li><a href="">一级标题</a>
            <ul id="list">
                <li><a href="">二级标题</a></li>
                <li><a href="">二级标题</a></li>
                <li><a href="">二级标题</a></li>
            </ul>
        </li>
        <li><a href="">一级标题</a></li>
    </ul>
</body>
</html>

另附JS版（就是用js的onmouseover和onmouseout替换CSS的hover,这里纯粹为了记录遇到的坑）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="">
<style>
    *{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    body{  
        background: cornsilk;
    }
    .nav{
        display: flex;
        justify-content: space-between;
        width: 500px;
        height: 50px;
        margin: 50px auto;
    }
    .nav li{     
        width: 150px;
        height: 50px;
        margin-right: 10px;
        background-color: greenyellow;
        line-height: 50px;
        text-align: center;
    }
    
    .nav li a{
        display: block;
        width: 100%;
        height: 100%;
        color: #795548;
        font-size: 20px;
    }
    .nav li a:hover{
        background-color: #FFC107;
    }
    .nav > li:nth-child(2){
        position: relative;
    }
    #list{
        position: absolute;
        overflow: hidden;/*必须用overflow,不然内容会挤出去，就算设置高度为零也没意义*/
        height:0;   /*为了一开始把子元素隐藏*/
        transition: 1s;
    }
</style>
</head>
<body>
    <ul class="nav">
        <li><a href="">一级标题</a></li>
        <li onmouseover="Show_ul()" onmouseout="Hidden_ul()"><a href="">一级标题</a>
            <ul id="list">
                <li><a href="">二级标题</a></li>
                <li><a href="">二级标题</a></li>
                <li><a href="">二级标题</a></li>
            </ul>
        </li>
        <li><a href="">一级标题</a></li>
    </ul>
</body>
<script>
    function Show_ul(){
        var tp=document.getElementById("list");
        tp.style.height="200px";
        // tp.style.overflow="visible"
        // tp.style.visibility="visible"
    }
    function Hidden_ul(){
        var tp=document.getElementById("list");
        tp.style.height="0px";
        // tp.style.overflow="hidden"
        // tp.style.visibility="hidden"
    }
</script>
</html>

考研期间是不是不该干这种费时间的事(╥╯^╰╥)。

本文作者： 本该如此
本文链接： https://anyway521.github.io/post/61e2c705.html
最后更新： 2021年01月13日 11:12:06
版权声明： 博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议进行许可，转载请注明出处！