Create an artist's navigation bar

Materials used:

Effect:

In fact, the whole process is still time-consuming to write CSS, mainly because the browser compatibility and the PNG background image transparency of IE takes a long time.

I. browser compatibility:

Mainly the differences in cursor in CSS (I forgot about the difference in other processes ):

Cursor is very strange in IE6. I started to set the Mouse shape as a finger on the Li layer. IE6 is invalid, UL and Div settings of the compound layer are invalid, later, I tried to set the DIV inside Li, and the miracle appeared, and the mouse and finger appeared. Here I understand that when IE6 parses the Dom, setting the mouse to act on the first parent element with content in the tag is valid, and I feel that many aspects of IE6 have such a design scheme.

Ii. IE6 make the PNG background image transparent

On IE6, PNG is not transparent, so you need to set PNG transparency through the unique ie lens effect, but to be compatible with other browsers such as FX, you need to use CSS hack, it is to use IE to parse CSS symbols such as *, which is written below the original CSS attribute. When IE6 is used, IE6 parses * to overwrite the original CSS. This is very complicated, see the following CSS:

. Mun_contant {width: 80px; Height: 25px; text-align: center; Background-image: URL (images/menu/tab_normal.png); background-position: center; Background-repeat: no-Repeat; line-Height: 235% ;}
* HTML. mun_contant {margin: 0px auto; Height: 25px; width: 65px; line-Height: 235%; filter: progid: DXImageTransform. microsoft. alphaimageloader (Enabled = true, src = "images/menu/tab_normal.png"); Background: none;}/** IE6 **/

In IE6, *. mun_contant under HTML overwrites. mun_contant above, and other browsers do not recognize * HTML, So skip

The above code: filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = true, src = "images/menu/tab_normal.png"); Background: None

It is to use a filter to solve the PNG transparency problem. However, the consequence of IE6 is that the position setting of the background image is invalid, and the position of the background image cannot be moved. Then, my solution is, move the DIV block of the background image to center

There is another difficulty in this navigation, because the <A> label, 1. you need to write js to achieve page Jump, but after the jump, 2. click the label to select the status 3. the selected tag is not affected by the move-in and-out of the mouse (I imagine that the move-in event and the click event are completely separated and cannot be coupled)

Solution:

First, add the rev attribute to Li, write the link address, bind the click event, obtain the click event, and set window. Location = rev. value.

Second, after thinking for a long time, I finally considered that when the Page Link is refreshed, the only correct variable is the content in the address bar, and then I wrote a load monitoring, traverse the rev value of Li. If the address in the address bar is matched (lastindexof (), the Li tag is selected.

Third, it was quite troublesome. Later, fortunately, jquery had a method named addclass (), which could overwrite the original class, which was easy, you can simply move the mouse to the event and click the event separately. This is an overlay idea. The original class is: a move the mouse to the event is addclas (B) and removeclass (B ), when the mouse is selected, addclass (B _1) (B _1 and B have the same style, but only different class names can be used for superposition). When the mouse clicks, A is overwritten by B _1, when the mouse moves to the selected Li, B _1 is overwritten by B (the content of the two styles is the same, so there is no change), move the mouse out, remove B, so this time the selected style is restored to B _1, still unchanged

• This article
• News
• Online Shopping
• Comprehensive Query
• Operation Network
• Product Information
• Member Service
• Help Information

 

 

 

 

The effect is the same as above.