利用transform实现一个纯CSS弹出菜单的示例代码

前言

在 制作 顶部菜单的时候，都会要求制作弹出的二级菜单，早先的做法是用 jq uery的来控制二级菜单的显示和 过渡动画 ，但 利用 CSS3中的transform属性后，这一切都变得异常 简单

先上效果

制作方法

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

<nav>
  <ul>
    <li>
      < strong >home</strong>
      <div>
        <a  hr ef=""> 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=""> ;m m</a>
        <a href="">dd</a>
      </div>
    </li>
  </ul>
</nav>

 *{
    padding: 0;
    m arg in: 0;
    box -s izing: border-box;
  }
  body{
    width: 100vw;
    h ei ght: 100vh;
    dis play : flex;
    flex-direction: column;
    justify-content: flex-start;
    align -i tems:  center ;
  }
  nav{
    mar gin : 10px;
  }
  nav ul {
    list-style -t y PE : none;
    height: 32px;
    display: flex;
  }
  nav ul li{
    margin-right: 10px;
  }
  nav ul li strong{
    text-transform: uppercase;
    background-color:  # 9b59b6;
    color: wh IT e;
    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: to p; 
  }
  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;
  }

到此这篇关于利用transform实现一个纯CSS弹出菜单的示例代码的 文章 就介绍到这了,更多相关纯CSS弹出菜单内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 利用transform实现一个纯CSS弹出菜单的示例代码 全部内容，希望文章能够帮你解决 利用transform实现一个纯CSS弹出菜单的示例代码 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于利用transform实现一个纯CSS弹出菜单的示例代码的详细内容...