Example code for implementing a pure CSS pop-up menu using transform

Preface

When making a top menu, you will be required to make a pop-up secondary menu. The previous approach was to use jQuery to control the display and transition animation of the secondary menu, but after using the transform property in CSS3, everything becomes extremely simple.

First the effect

Preparation method

The core is to use the regional displacement method of transform, combined with the hover pseudo class and animation delay of the li tag, so as to simply realize the display of the submenu

<nav>
  <ul>
    <li>
      <strong>home</strong>
      <div>
        cms
        <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;
  }

This concludes this article on using transform to implement a pure CSS pop-up menu sample code. For more related pure CSS pop-up menu content, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Detailed explanation of the six common constraint types in MySQL

>>: Detailed description of component-based front-end development process