In fact, the concept of CSS sliding door has already appeared a few years ago, but it has been mentioned more recently. But some people often confuse it with the tab effect, especially some new friends, so I will write a detailed explanation here, hoping to help.
Sliding Doors are neither advanced nor CSS techniques. It uses overlapping background images and slide each other to achieve some results. The most common is the corner navigation. We can think of one left, one right, and two corner backgrounds as two sliding doors. They can slide together and overlap to display less content, you can also slide each other to display more content, as shown in:
In some previous tutorials, I like to cut the background image into one wide, one narrow, two parts for stitching. In fact, a single image is enough.
Here, we only use the two tags "A" and "span", and the style can be defined in three states, which is the simplest way.
Reference content is as follows:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Style>
Body {font-size: 12px ;}
. Nav {margin: 0 auto; text-align: center; font-weight: bold; border-bottom: 3px solid #579cc6 ;}
. Nav a {display: inline-block; margin: 0 3px; Height: 25px; Background: URL (/upimg/allimg/090506/0158361 .jpg) left bottom no-Repeat; padding-left: 15 PX; color: #666; text-Decoration: none; cursor: pointer ;}
. NAV a span {display: inline-block; Height: 25px; line-Height: 25px; Background: URL (/upimg/allimg/090506/0158361 .jpg) right bottom no-Repeat; padding-Right: 15px ;}
. Nav A: hover {Background: URL (/upimg/allimg/090506/0158361 .jpg) Left top no-Repeat; color: # FFF ;}
. Nav A: hover span {Background: URL (/upimg/allimg/090506/0158361 .jpg) right top no-Repeat ;}
. Nav A. set {Background: URL (/upimg/allimg/090506/0158361 .jpg) Left top no-Repeat; color: # FFF ;}
. Nav A. Set span {Background: URL (/upimg/allimg/090506/0158361 .jpg) right top no-Repeat ;}
</Style>
</Head>
<Body>
<Div class = "nav">
<A class = "set" href = "#"> <span> homepage </span> </a>
<A href = "#"> <span> Category 1 </span> </a>
<A href = "#"> <span> Category </span> </a>
<A href = "#"> <span> A little longer </span> </a>
<A href = "#"> <span> welcome </span> </a>
<A href = "#"> <span> my blog </span> </a>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
