How to realize the effect of sliding door with CSS
This article mainly shows you "CSS how to achieve sliding door effect", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to achieve sliding door effect CSS" this article.
Characteristics of sliding door effect:
(1) practicability: the width can be adjusted automatically according to the length of the navigation bar menu text.
(2) simplicity: a simple background picture can be used to create a good-looking navigation bar effect.
(3) applicability: it can be applied in multiple layers.
Case sharing
Imitate JD.com 's home menu navigation bar sliding door
We can make the sliding door effect by setting pseudo elements to the element. We use dispaly:none to hide the menu when the mouse is not over the li, and the dispaly:block displays the menu when the mouse slips out and triggers the hover event. So we can use the CSS code to create the sliding door effect.
* {
Padding:0
Margin:0
List-style:none
Text-decoration:none
}
Ul {
Padding:20px0px
Width:200px
Background:#fff
Border:1pxsolid#ccc
Position:relative
}
Ulli {
Height:40px
Line-height:40px
Padding-left:10px
}
Ulli:hover {
Background:#ccc
}
Ullia {
Color:#444
Font-size:14px
}
/ * sliding door * /
Ul.div1,.div2,.div3 {
Position:absolute
Top:0
Left:200px
Display:none
}
Ulli:hover.div1 {
Display:block
Width:800px
Opacity:1
}
Mobile phone / operator / digital
Computer / office
Home / furniture / home improvement
Men's / women's / children's wear
The above is all the content of the article "how to achieve sliding door effect in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
