How to set the slow drop-down effect of the menu bar by html5

This article will explain in detail how to set up the slow drop-down effect of the menu bar in html5. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Method 1: transition (transition)

Enable absolute positioning (absolute) for forum-1 to detach the li from its parent element, otherwise the following content will be squeezed to the right, and set overflow:hidden, set height to 0, and then set the corresponding height after the mouse is moved in:

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

The html code is as follows:

The menu bar slowly drops down the blog forum css vue python Live

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.5s;} .forum:hover .forum-1 {/ * mouse release height * / height: 150px;}

After many attempts, it is found that transition does not support the display attribute, that is, you cannot hide the menu bar with display:none.

Method 2: animation (animation)

First create a css animation:

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

Then set the display:none hidden menu style, bind it to the forum-1 selector, bind the animation name with 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.5s;}

When the mouse is moved in, set the display property to block:

Forum: hover. Forum-1 {display: block;}

It is important to note that there is a problem with the result of this writing: the secondary menu bar will be automatically withdrawn soon after the mouse is moved. To avoid this problem, we can add a line of code inside the forum-1 selector:

Forum-1 {animation-fill-mode: forwards;} article on "how to set the slow drop-down effect of the menu bar in html5" ends here. I hope the above content can be of some help to you so that you can learn more knowledge. if you think the article is good, please share it for more people to see.