美文网首页
CSS实现悬浮式菜单

CSS实现悬浮式菜单

作者: 我叫397 | 来源:发表于2020-07-22 13:34 被阅读0次

    划水摸鱼的时候研究了下CSS实现悬浮式菜单,在此分享一下!

    效果图:

    效果图

    HTML:

    <div class="header">
        <div class="nav">
            <ul>
                <li><a href="">菜单A</a></li>
                <li><a href="">菜单B</a></li>
                <li><a href="">菜单C</a></li>
                <li>
                    <a href="" class="showSubmenu">菜单D</a>
                    <ul class="submenu">
                        <li><a href="">子菜单A</a></li>
                        <li><a href="">子菜单B</a></li>
                        <li><a href="">子菜单C</a></li>
                        <li><a href="">子菜单D</a></li>
                    </ul>
                </li>
                <li>
                    <a href="" class="showSubmenu">菜单E</a>
                    <ul class="submenu">
                        <li><a href="">子菜单A</a></li>
                        <li><a href="">子菜单B</a></li>
                        <li><a href="">子菜单C</a></li>
                        <li><a href="">子菜单D</a></li>
                        <li><a href="">子菜单E</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    

    CSS:

    body{
        margin: 0;
    }
    ul{
        list-style: none;
        padding: 0;
        margin: 0;
    }
    a{
        text-decoration: none;
    }
    .header{
        width: 100%;
        background-color: #076fd9;
    }
    .nav{
        width: 1200px;
        margin: 0 auto;
        height: 50px;
    }
    .nav ul li{
        float: left;
        line-height: 50px;
        height: 50px;
        width: 120px;
    }
    .nav ul li:hover{
        background-color: #0959A7;
    }
    .nav ul li a{
        display: block;
        color: #fff;
        font-size: 14px;
        text-align: center;
    }
    .nav ul li .submenu li{
        width: 120px;
        line-height: 50px;
        height: 50px;
        background-color: #076fd9;
    }
    .nav ul li .submenu li:hover{
        background-color: #0959A7;
    }
    .nav ul li .submenu{
        display: none;
    }
    .nav ul li:hover .submenu{
        display: block;
    }
    .showSubmenu{
        pointer-events: none;
        cursor: default;
    }
    

    关于transition:

    transition是一个复合属性,有四个属性transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

    transition-property: 过渡属性(默认值为all)
    transition-duration: 过渡持续时间(默认值为0s),必需值且不能为0
    transiton-timing-function: 过渡函数(默认值为ease函数)
    transition-delay: 过渡延迟时间(默认值为0s)
    
    /***** 本例中的hover过渡 *****/
    .nav ul li:hover{
        background-color: #0959A7;
        transition: background-color 0.5s ease 0s; //W3C 标准
        -moz-transition: background-color 0.5s ease 0s; //Mozilla内核
        -webkit-transition: background-color 0.5s ease 0s; //Webkit内核
        -o-transition: background-color 0.5s ease 0s; //Opera内核
    }
    

    另外,transition与display的冲突此处暂不做讨论!

    相关文章

      网友评论

          本文标题:CSS实现悬浮式菜单

          本文链接:https://www.haomeiwen.com/subject/ptwzkktx.html