Some summarization and generalization of the CSS sliding door technology

Css

A few days ago added a design group, inside a bunch of people are shouting to learn CSS, but do not know where to start, so I casually muttered in the group, "Haha, I am a master ..." The results led to scold countless, although I am not satisfied, but still admit their own CSS not enough, in addition to layout/text/link These simple processing, some other acts of basic will not.

And one of them said, "If you're a master, then you introduce the CSS sliding door technology in detail, which makes me exciting, so I collected some things about CSS sliding door technology from the internet overnight, and made a sliding door, in fact, before learning CSS sliding door technology, I've found that I've done a lot of similar menu effects, the most representative is Sogou site navigation search box, and later this effect is widely used in Sogou search engine, I am here to summarize some of the knowledge of CSS sliding door, I hope to give you the learning of CSS to play a helping role, Another combination of javascript,css can produce more dazzling effects.

　　Background:

From my understanding, CSS sliding door is stimulated, because many people think that CSS can not make beautiful web pages, but in fact, the opposite, CSS not only can make quite beautiful pages, but also can be very good to the content and performance apart, give designers and developers more space to play;

　　Defined:

Sliding door technology is: when clicked on the navigation button on the page after the navigation button's CSS features changed, so different from the group's other navigation buttons, prompting to the operator, the current browsing content is the CSS feature changes in the button pointing to the content. One of the great benefits of this effect is that you can clearly reflect what columns or classes The current browsing content is on a multiple-navigation page, while giving a visually pleasing, clear, and clear visual feel. The leading actor of the sliding door technology is the manipulated object, this is the object that is clicked here, the CSS feature is mainly refers to the navigation button including the other elements of the property changes, of course, this button can be in the form of buttons, A, TD can even be a P or div such a closed element, Their properties mainly refers to the elements of the border, background, font color, size, thickness and outer and inner spacing, and so on, in short, all of its own "status" can be distinguished from the other properties of the main may be used in sliding door technology.

　　Application scope:

Site navigation Menu

Technical points:

1. With unordered list of UL and Li composition menu structure

2. Set the background to Li (if there is a rounded corner, set to right or left, the background picture far more than the length of the submenu)

3. Set the display of a in Li as block, and give a background attribute (if there is rounded corner, set to right or left, the background image as long as the width of a fillet)

4. Set the current menu a properties (padding-bottom plus n pixels, covering the bottom of the entire menu, n according to the specific effect of the decision)

5. Use JS to control the effect after the mouse clicks (first a loop to reset all the button background, and then change the current button style)