运用transform完成一个纯CSS弹出●▂●来莱单的实

2020-11-04 06:02 jianzhan

序言

在制作顶端莱单的情况下,都是规定制作弹出来的二级莱单,以前的作法是用jQuery的来操纵二级莱单的显示信息和衔接动漫,但运用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;
  }

到此这篇有关运用transform完成一个纯CSS弹出来莱单的实例编码的文章内容就详细介绍到这了,大量有关纯CSS弹出来莱单內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!