网页制作 
首页 > 网页制作 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

前言

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

先上效果

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

制作方法

核心就是利用了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;
  }

上一篇:详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式
下一篇:css counter计数器与content总结
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap