用纯CSS咋做弹出菜单的效果？

发布时间：2023-08-02 14:53:55 所属栏目：语言来源：

导读：用纯CSS怎样做弹出菜单的效果？弹出菜单是比较常见的一种菜单，也就是弹出的二级菜单的效果。而实现弹出二级菜单有很多方法，本文给大家分享的是CSS3中的transform属性实现弹出菜单，实现效果及代码如下：

制作方

用纯CSS怎样做弹出菜单的效果？弹出菜单是比较常见的一种菜单，也就是弹出的二级菜单的效果。而实现弹出二级菜单有很多方法，本文给大家分享的是CSS3中的transform属性实现弹出菜单，实现效果及代码如下：

制作方法

核心就是利用了transform的区域位移方法，在配合上li标签的hover伪类和动画延时，从而简单实现了子菜单的显示

<nav>

  <ul>

    <li>

      <strong>home</strong>

      <div>

        <a href="">cms</a>

        <a href="">crm</a>

      </div>

    </li>

    <li>

      <strong>live</strong>

      <div>

        <a href="">java</a>

        <a href="">php</a>

      </div>

    </li>

    <li>

      <strong>pictrue</strong>

      <div>

        <a href="">mm</a>

        <a href="">dd</a>

      </div>

    </li>

  </ul>

</nav>

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    width: 100vw;

    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: center;

  }

  nav{

    margin: 10px;

  }

  nav ul {

    list-style-type: none;

    height: 32px;

    display: flex;

  }

  nav ul li{

    margin-right: 10px;

  }

  nav ul li strong{

    text-transform: uppercase;

    background-color: #9b59b6;

    color: white;

    padding: 5px 30px;

    line-height: 30px;

    cursor: pointer;

  }

  nav ul li strong+div{

    display: flex;

    flex-direction: column;

    background-color: #3498db;

    padding: 10px;

    transform: translateY(-110%);

    opacity: 0;

    transition: .3s;

    transform-origin: top;

  }

  nav ul li:hover div{

    transform: translateY(0);

    opacity: 1;

  }

  nav ul li strong+div a{

    color: white;

    text-decoration: none;

    text-transform: uppercase;

    padding: 5px 0;

  }

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!