Realization of Web page sliding door effect based on HTML+CSS

We often see in the Web page such a navigation effect, because the use of a wide range of frequency, so the vast number of programmers gave it a name, called Sliding door. This article has introduced the HTML+CSS technology to realize the Web page sliding door effect, needs the friend reference under

First, what is sliding door

We often see in the Web page such a navigation effect, because the use of a wide frequency, so the vast number of programmers gave it a name, called sliding door. Before learning to slide the door, first you need to understand what a sliding door is.

Xiaomi website, web sliding door effect

Second, the realization of sliding door technology required

1. Basic knowledge of simple HTML

2. A simple CSS base style

3. CSS Positioning

Three, how to realize sliding door

1. Prepare an HTML code

<p class= "bg" >     <ul>         <li>             <a href= "#" > Mobile phone card </a>             <p class= "P1" >                 <p> This is my first sliding door </p>                              </p >         </li>         <li>             <a href= "#" > Mobile phone card </a>             <p class= "P2" ></p>         </li>         <li>             <a href= "#" > Mobile phone card </a>             <p class= "P3" ></p>         </li>         <li>             <a href= "#" > Mobile phone card </a>             <p class= "P3" ></p>         </li>     </ul> </p>

2. Add some styles to the current HTML structure

<style>     body,ul,li,p{         margin:0;         padding:0;     }     ul{         List-style:none;         padding:20px 0px;         width:234px;         Background:rgba (0,0,0,.6);/* Locate as parent using */         position:relative;     }     UL li{         height:42px;         line-height:42px;         padding-left:20px;     }     UL li:hover{         background: #ff6700;     }     UL li a{         color: #fff;         Text-decoration:none;         font-size:14px;     } </style>

3. Using positioning to achieve sliding door effect

/* Sliding door */     ul. p1,.p2,.p3{         width:800px;         height:460px;         background:skyblue;/*-------Important steps for sliding doors using positioning *//////////////////* Gavie java8733 Learn more about obtaining information * *         Position:absolute         top:0;         left:234px;         Display:none;     } /* When the mouse hovers over the content is displayed corresponding code block */     ul li:hover. p1{         Display:block;         width:800px;         opacity:1;     }     UL Li:hover. p2{         Display:block;         Background:pink;         width:600px;         height:460px;     }

According to the above steps, you can achieve a simple sliding door effect, quickly go to try it.

Iv. Examples of sliding doors

The following example as a class assignment, please refer to the Shanghai Shang School official website http://www.shsxt.com/