Plain CSS implements a slow menu bar pull-down effect

Using CSS to make the menu bar appear slowly when the mouse moves over it, we can solve this problem in two ways

Method 1: Transition

  • Enable absolute positioning for forum-1, so that li is removed from its parent element, otherwise it will crowd the following content to the right, and set overflow: hidden, set the height to 0, and then set the corresponding height after mouse move in

    .code .forum-1{
  /* Enable absolute positioning */
  position: absolute;
  overflow: hidden;
  height: 0;
  transition-duration: 0.5 s;
}
Copy the code

  • The HTML code is as follows:

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/reset.css">
  <title>The menu bar slowly pulls down</title>
</head>
<body>
  <ul class="code">
    <li><a href="#">blog</a></li>
    <li class="forum"><a href="#">BBS</a>
      <ul class="forum-1">
        <li><a href="#">css</a></li>
        <li class="vue"><a href="#">vue</a></li>
        <li><a href="#">python</a></li>
      </ul>
    </li>
    <li><a href="#">live</a></li>
  </ul>
</body>
</html>
Copy the code

The CSS style code is as follows:

a{
  display: block;
  text-decoration: none;
  color: # 333;
}
.code{
  width: 390px;
  height: 50px;
  line-height: 50px;
  background-color:#bfa;
  margin: 5px auto;
}
.code li{
  float: left;
  width: 130px;
  height: 50px;
  background-color: #bfa;
  text-align: center;
  margin: 0 auto;
  font-size: 20px;
}
.code > li:last-child{
  margin-right: 0;
}
.code > li:hover{
  background-color: #f8f192;
}
.forum{
  position: relative;
  margin: auto 90px;
}
.code .forum-1{
  /* Enable absolute positioning */
  position: absolute;
  overflow: hidden;
  height: 0;
  transition-duration: 0.5 s;
}
.forum:hover .forum-1{
  /* Cursor cursor release height */
  height: 150px;
}
Copy the code

On many attempts, transition does not support display, which means you can’t hide the menu bar with display: None

Method 2: Animation

  • Create the CSS animation first:

    @keyframes frames{
  from{
    height: 0px;
  }
  to{
    height: 150px; }}Copy the code

  • Then set display: None to hide the menu style, bind it to the forum-1 selector, bind the animation name to the animation, and set the duration

    .forum-1{
  position: absolute;
  display: none;
  overflow: hidden;
  /* Bind the animation name and set the duration */
  animation-name: frames;
  animation-duration: 0.5 s;
}
Copy the code

  • When the mouse moves in, set the display property to block

    .forum:hover .forum-1{
  display: block;
}
Copy the code

  • Note that there is a problem with the secondary menu bar retracting when the mouse is over. To avoid this problem, we can add a line of code inside the forum-1 selector:

    .forum-1{
	animation-fill-mode: forwards;
}
Copy the code

  • The rest of the code is the same as in method one and will not be described here


The last

If it helps you, please like and bookmark this article and let more people see it ~ (“▔□▔)/

If you have any objections, please leave them in the comments section and I will reply one by one

If you are interested, please visitA blogger with a light in his eyes