Introduction and examples of css Sliding Door Technology

"If you are a css expert, you can introduce css sliding door technology in detail ". after reading this sentence, I have to learn the so-called css sliding door technology. I want to be a master too. at that time, when Baidu answered a question, he found many articles asking about css sliding door technology. At that time, I really didn't know that there was a sliding door technology in css. the so-called sliding door can be understood in this way that the background image of the menu (rounded corner, right angle, other) will automatically become longer (shorter) according to the number of texts, which is like a sliding door.

Helper house www.bkjia.com

Background of css Sliding Door Technology:

It can be said that the css sliding door technology is stimulated, because many people think that css cannot make beautiful webpages, but in fact, on the contrary, css can not only make pretty webpages, the content and performance can also be well separated to give designers and developers more space to play;

Css Sliding Door Technology Definition

The sliding door technology is: When you click the navigation button on the page, the CSS feature of this navigation button changes, which is different from other navigation buttons in this group, prompting the operator, the content currently browsed is the content pointed to by the button with the CSS feature changed. 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. Its CSS feature mainly refers to the changes in the attributes of the navigation button including other elements. Of course, this BUTTON can be in the form of A closed element such as BUTTON, A, TD, or even P or DIV, their attributes mainly refer to the border, background, font color, size, width, outer distance and inner distance of the element. In short, all attributes that can distinguish their "status" from other owners can be applied to the sliding door technology.

Application Scope of css Sliding Door Technology:

Website navigation menu

Summarize several technical points:

A: Because we only use css for implementation and the code should be as few as possible, ul and li tags are our first choice,

B: The ui has the default tag attribute. We need to use margin: 0px; padding: 0px; list-style: none; to use it.

C: li is arranged vertically by default. We need to use display: inline; to display it in a single row.

D: a is a row element by default. We need to set it to float: left so that it depends on the left.

E: span is also a row element by default. We often use it to adjust the menu height. Therefore, we need to set display: block;

F: Because span is in the label, if the span height is increased, the background image in a is automatically increased.

G: Because the span background image is in the background image, if the padding-left: 4px of the a label is not set (it is the width of the left background image), the left side (of the label) will be completely overwritten by the background image on the right (within the span label ).

H: The image is positioned

Background: url(tableft.gif) left top no-repeat; and

Background: url(tableft.gif) left-42px no-repeat;

To achieve this, you must set no-repeat, and-42 is half of the total Image Height.

See the following example code:

Html code:

Reference content is as follows: <Style> A {text-decoration: none; color: # FFFFFF ;} # Menu ul {margin: 0px; padding: 0px; list-style: none ;} # Menu li {display: inline ;} # Menu a {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-42px no-repeat ;} # Menu a: hover span {background: url(tabright.gif) right-42px no-repeat ;} </Style> <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>