Summary and induction of css sliding door technology

A design group was added a few days ago. A group of people were clamoring to learn css, but they didn't know where to start. So I muttered in the group, "haha, I am a master .... "As a result, there were countless cursing. Although I was not convinced, I still admitted that my css skills were not enough. In addition to the simple processing of layout, text, and link, some other behaviors would not.
One of them said, "If you are a master, then you will introduce css sliding door technology in detail, so I collected some things about css sliding door technology from the internet overnight, and made a sliding door myself. In fact, before learning css sliding door technology, I found that I have done a lot of similar menu effects. The most representative is the search box of Sogou URL navigation. Later, this effect was widely used in Sogou's search engine, I will summarize some css sliding door knowledge here, hoping to help you learn css. In addition, with javascript, css can be used to produce more dazzling effects.
Background:
In my understanding, css sliding doors are excited because many people think that css cannot make beautiful webpages, but in fact, 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;
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:
Website Navigation menu
Technical points:
1. Use the unordered list ul and li to form the menu structure
2. Set the background for li (if there is a rounded corner, set it to the right or left, and the background image is far beyond the length of the sub-menu)
3. set the display of a in li to block and add the background attribute to a (if there is a rounded corner, set it to the right or left, and set the background image to the width of a rounded corner)
4. Set attributes of current menu a (padding-bottom adds n pixels to overwrite the bottom edge of the entire menu, and n is determined based on the specific effect)
5. Use js to control the effect after the mouse clicks (first, reset the background of all buttons in a loop, and then change the current button style)