Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.