Introduction and examples of CSS Sliding Door Technology

"If you are a CSS expert, you can introduce the CSS sliding door technology in detail ." CSSSliding Door Technology. I also wanted to be a master. When I answered a question in Baidu's knowledge, I found that there were many CSS sliding door technologies. Article . I did not know CSS There is also a sliding door technology . The so-called sliding door can be understood in this way, the background image of the menu ( Rounded corner, right angle, Other ) Will automatically become longer based on the number of characters ( Shortening ) It seems like a sliding door.

 

CSSBackground of Sliding Door Technology:

You can say this.CSSSliding Door Technology is excited,Because many people think thatCSSAnd cannot make beautiful web pages,But in fact, the opposite is true., CSSNot only can we make pretty web pages,It is also good to separate content and performance.,Give designers and developers more space to play;

CSSSliding Door Technology Definition

The sliding door technology is:When you click the navigation button on the pageCSSThe feature is changed, which is different from other navigation buttons in the group. The prompt is displayed to the operator. The content currently browsed isCSSThe content that the button points to when the feature changes. One of the major advantages of this effect is that the multi-navigation page can clearly reflect the topic or category of the current browsing content, and give a beautiful, clear, and clear visual experience. The main character of the sliding door technology is the operated object, that is, the clicked object.CSSThe feature mainly refers to the changes in the attributes of the navigation button including other elements. Of course, the form of this button can beButton,A,TDOr evenPOrDivFor such closed elements, their attributes mainly refer to the border, background,FontThe color, size, width, outer distance, and inner distance of the image."Status"Properties different from other owners can be applied to the sliding door technology.

CSSApplication Scope of Sliding Door Technology:

Website navigation menu

Summary of several technical points:

A:Because we only useCSSAndCodeAs few as possible, thenUlAndLiTags are our first choice,

B: UiThe default tag property is available.Margin: 0px; padding: 0px; List-style: none;To use it

C: LiIt is arranged vertically by default.Display: inline;To display it in a single row.

D:It is a row element by default. We need to set it.Float: leftTo keep it on the left

E: SpanIt is also a line element by default. We often use it to adjust the menu height, so we need to setDisplay: block;

F:BecauseSpanInALabel, ifSpanThe height is increased.AThe background image is automatically increased.

G:BecauseSpanThe background image isAIn the background image, if you do not setALabelPadding-left: 4px (It is the width of the Left background image.);Left(Label)The background image is(SpanLabel)The background image of is completely overwritten.

H:The image is positioned

Background: url(tableft.gif) Left top no-Repeat;And

Background: url(tableft.gif) Left-42px no-Repeat;

To achieve,Be sure to setNo-repeat,-42Half of the total Image Height

 

See the following example code:

HTML code:

<Div id = "menu">
 
<Ul>
<Li> <a href = "index.html"> <span> Home </span> </a> </LI>
<Li> <a href = "index.html"> <span> News </span> </a> </LI>
<Li> <a href = "index.html"> <span> downloads </span> </a> </LI>
<Li> <a href = "index.html"> <span> services </span> </a> </LI>
<Li> <a href = "index.html"> <span> support </span> </a> </LI>
<Li> <a href = "index.html"> <span> about </span> </a> </LI>
</Ul>

</Div>

The CSS style code is as follows:

A {text-Decoration: none; color: # ffffff ;}

# Menu ul {margin: 0px; padding: 0px; List-style: none ;}

# Menu Li {Display: inline;}

# Menu {Float: left; Background: url(tableft.gif) Left top no-Repeat;Padding-left: 4px;}

# Menu span {Display: Block; Background: url(tabright.gif) Right top no-Repeat; padding: 4px 10px 4px 6px ;}

# Menu A: hover {Background: url(tableft.gif) left-42pxNo-Repeat ;}

# Menu A: hover span {Background: url(tabright.gif) Right-42px no-Repeat ;}
This article is transferred from"Baiyang Software Research Lab"Listly blog