美文网首页
纯CSS3制作二级导航

纯CSS3制作二级导航

作者: 宇落星辰_30ba | 来源:发表于2019-04-18 00:33 被阅读0次

    HTML部分
    ···

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="../css/base.css">
        <link rel="stylesheet" href="../css/navigation.css">
        <title>Two stage navigation -- 二级导航</title>
    </head>
    <body>
        <header>
            <nav class="naviga">
                <ul class="menu">
                    <li><a href="#">我的淘宝<b class="triangle"></b></a>
                        <ul class="submenu">
                            <li><a href="#">天宇无敌</a></li>
                            <li><a href="#">超级天宇</a></li>
                            <li><a href="#">超级天宇无敌</a></li>
                        </ul>
                    </li>
                    <li><a href="#">购物车<b class="triangle"></b></a>
                        <ul class="submenu">
                            <li><a href="#">2天宇无敌2</a></li>
                            <li><a href="#">2超级天宇2</a></li>
                            <li><a href="#">2超级天宇无敌2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">收藏夹<b class="triangle"></b></a></li>
                    <li><a href="#">商家支持<b class="triangle"></b></a></li>
                    <li><a href="#">网站导航<b class="triangle"></b></a></li>
                </ul>
            </nav>
        </header>
        <i class="triangle"></i>
    </body>
    </html>
    

    ···

    CSS部分
    ···

       header {
        width: 100%;
        height: auto;
        border: 1px solid #ddd;
        background: #f5f5f5;
      }
      header .naviga {
        width: 80%;
        height: auto;
        margin: 0 auto;
      }
      header .naviga .menu {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
     }
     header .naviga .menu li {
        flex: 1;
        width: auto;
        text-align: center;
        line-height: 40px;
      }
      header .naviga .menu li:hover {
        box-sizing: border-box;
        border-right: 1px solid #f5f5f5;
       border-left: 1px solid #f5f5f5;
        background: #fff;
     }
     header .naviga .menu li .submenu {
        display: none;
        position: fixed;
        z-index: 2;
        width: auto;
        height: auto;
        background: #fff;
        text-align: center;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-top: none;
      }
      header .naviga .menu li .submenu li {
        box-sizing: border-box;
        padding: 0 10px;
      }
      header .naviga .menu li:hover .triangle {
        animation: auR 0.3s forwards;
      }
      header .naviga .menu li:hover .submenu {
        display: flex;
        justify-content: center;
        flex-direction: column;
      }
     header .naviga .menu li:hover .submenu li {
        flex: 1;
      }
      header .naviga .menu li .triangle {
        position: relative;
        top: -2px;
        left: 5px;
        width: 0;
        height: 0;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #000 transparent;
        display: inline-block;
      }
      header .naviga .menu li .triangle:after {
        position: absolute;
        z-index: 2;
        bottom: -6px;
        left: -5px;
        content: '';
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #fff transparent;
      }
      @keyframes auR {
        from {
          transform: rotateZ(-90deg);
          transform-origin: 50% 75%;
        }
        to {
          transform: rotateZ(-180deg);
          transform-origin: 50% 75%;
        }
      }
    

    ···

    相关文章

      网友评论

          本文标题:纯CSS3制作二级导航

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