Tilt the mouse to flip the troubles on the making of the navigation

The day before yesterday a friend sent me a page let me help her to see why the mouse rollover can not achieve. I opened the source file and looked at it and found that she had not mastered the feature of a mouse flip. And it's not enough to think about tilt navigation. Although I had seen these problems at the time, I didn't have time to explain them because I had a project in hand. Just yesterday work was busy, and now picked up the document looked, found that the event can be explained a lot of knowledge points, there are some places more easily people do not pay attention to, but it is really crucial. Below we make a tilt of the mouse to flip the navigation for the process to do a number of tips for different places, hoping to help some of the mouse over the navigation of the production of friends still have questions.

Let's take a look at what we want to achieve, but before we do that it can only exist in our brains or sketches. We first have to think about what it looks like, and then we can analyze how we want to practice the effect is how to do, gossip less, first look at the picture:

We see the above picture, it can feel like nothing, seems very easy to do. Well, let's look at this effect in detail. We can't just insert a picture in HTML with the standard. Using the standard to do is to use the image as a background of the way to invoke the CSS. So let's take a look at whether such navigation can be directly invoked directly, and what problems are there? Below, take a look at the larger picture of this navigation effect:

We note that the "danger zone" in the above picture is obvious, if we put two inclined blocks together there must be a repeat area, our current CSS does not support the special-shaped processing. To solve this problem, you need to make the two squares overlap. Overlap requires that they be placed at different levels. This will be used in the CSS positioning: "position:static | Absolute | Fixed | Relative ". For more information on position, please check Su Ying's CSS2 Chinese manual, about how to locate please see my " interpreting absolute and relative"

Do the mouse flip we usually make a picture of all the backgrounds, and then use CSS to set the different positions of the pictures under different labels. One might think that the background map of the navigation should be this:

If that's what you think, then the problem comes out: When you flip a mouse over any chunk in five blocks, the repeat position on the top of the hazard area will block the left and the right side of the navigation. So the normal way is:

This can only be used as a final background image in the absence of a danger zone. Of course also note that the background is not white but transparent, mainly not to the background with the site integration, the key is not to block the adjacent background in the danger zone. I'm using a GIF, and the GIF has a bit of edge on the edges when it's transparent. If you want to deal with different colors of the site background, it is best to use PNG or the edge of the GIF to make dot pixels.

After thinking about this background map, we need to think about how to make this navigation. First to analyze this mouse rollover, the original mouse rollover is JS, now can be through the CSS: hover can also achieve this flip effect, less code, clear structure. So the flip of these five navigation is to be implemented by A:hover. A detailed explanation of a:hover can be found in Su Ying's CSS2 Chinese manual.

First I write down this navigation HTML code, because it is a structure, to be as concise as possible:

1. <ul id= "NAV" >
2. <li id= "A" ><a href= "title=" ">HOME</a></li>
3. <li id= "B" ><a href= "title=" ">ABOUT</a></li>
4. <li id= "C" ><a href= "title=" ">PRODUCT</a></li>
5. <li id= "D" ><a href= "title=" ">SEVICE</a></li>
6. <li id= "E" ><a href= "title=" ">FEEDBACK</a></li>
7. </ul>

Because each of our navigation areas are different, we need to add an ID to each block. With the structure of the following is the part of the CSS. Our navigation is horizontal, then we have to let this list of UL first lie down:

1. #nav {padding:0; margin:0; width:410px; height:25px; line-height:25px; overflow:hidden; list-style:none;}
2. #nav li {width:82px; height:25px; Float:left;}

When I put the UL lie down and suddenly think of it lying down in the wrong posture, why, because we need to be stacked in front of the tail on the effect, rather than the head of the buttocks. So it needs to be changed to:

1. #nav {padding:0; margin:0; width:410px; height:25px; line-height:25px; overflow:hidden; list-style:none; position: relative;}
2. #nav li {width:82px; height:25px; position:absolute;}

Why the #nav here to add a position:relative; It? Please refer to " unscramble Absolute and relative" and padding:0; margin:0; List-style:none is to remove the black spot before the UL, and clear the default value of the UL in the browser. You can also use a *{padding:0 at the beginning of a CSS file; margin:0; list-style:none; To clear the default value of the label in the browser. Put them down. I looked at the effect, and all the links came together. Because all the LI is defined as absolute value, everyone goes to the original point. We need to separate them. So then write CSS to separate them all:

1. #a {left:0px; top:0px;}
2. #b {left:79px; top:0px;}
3. #c {left:158px; top:0px;}
4. #d {left:237px; top:0px;}
5. #e {left:316px; top:0px;}

We found that their top value was 0, and to make the code a little bit more, we modified the CSS again:

1. #nav {padding:0; margin:0; width:410px; height:25px; line-height:25px; overflow:hidden; list-style:none; position: relative;}
2. #nav li {width:82px; height:25px; position:absolute; top:0px;}
3. #a {left:0px;}
4. #b {left:79px;}
5. #c {left:158px;}
6. #d {left:237px;}
7. #e {left:316px;}

are already separated, the following is the background picture added. Note here: The picture should be added to the a label, and if not, the error may occur. Of course, can also be placed in the UL background or Li, but that way, the picture is not the same, may not be very good understanding. Here only to put on a label.

1. #nav a {width:82px; height:25px; padding:30px 0 0; overflow:hidden; display:block; Background:url (bg.gif) no-repeat;

Here we will also define a label is 82 height of 25 square, here should be noted that a must be defined as block: display:block; Because this is the only way to fully display the background picture. And Overflow:hidden can also be a label in the text extrusion display area, of course, his parent tag also have overflow:hidden, otherwise in IE will appear overflow display phenomenon. Add a background image, then browse we found that five blocks only appear in the first area of the picture, five blocks are the same. We need to show what the five pieces should be. You need to add some more instructions:

1. #b a {background-position: -82px 0px;}
2. #c a {background-position: -164px 0px;}
3. #d a {background-position: -246px 0px;}
4. #e a {background-position: -328px 0px;}

As we see here, it doesn't #a a because the display of #a A is the current content, so this sentence can be saved, because #nav A has already defined the back picture because #nav a includes #a A, #b a ..., so here is a good background position. Again, it is correct, but there is no effect of mouse rollover. Next, the effect of the mouse rollover will be added:

1. #a a:hover {background-position:0 -25px}
2. #b a:hover {background-position: -82px-25px;}
3. #c a:hover {background-position: -164px-25px;}
4. #d a:hover {background-position: -246px-25px;}
5. #e a:hover {background-position: -328px-25px;}

As you can see, there are a lot of repetition here, can you omit it again? If only for IE the browser is possible, because IE in the background two private properties are called: Background-positionx,background-positiony. But neither Firefox nor Opera supports it, so it can't be saved here. It's basically a success. But there is a small detail, careful friend must have found that Li's position to move 79PX as a unit, and the picture is 82PX, the link is 82PX size. So we start with the length of the #nav is wrong, the normal is 398px, why is 398px then think about it yourself! All CSS code is given below:

1. #nav {padding:0; margin:0; width:398px; height:25px; line-height:25px; overflow:hidden; List-style:none; Position:relative.}
2. #nav li {width:82px; height:25px; position:absolute; top:0;}
3. #b {left:79px;}
4. #c {left:158px;}
5. #d {left:237px;}
6. #e {left:316px;}
7. #nav a {width:82px; height:25px; padding:30px 0 0; overflow:hidden; display:block; Background:url (bg.gif) no-repeat; }
8. #b a {background-position: -82px 0px;}
9. #c a {background-position: -164px 0px;}
10. #d a {background-position: -246px 0px;}
11. #e A {background-position: -328px 0px;}
12. #a a:hover {background-position:0 -25px}
13. #b a:hover {background-position: -82px-25px;}
14. #c a:hover {background-position: -164px-25px;}
15. #d a:hover {background-position: -246px-25px;}
16. #e a:hover {background-position: -328px-25px;}

To view the final effect:
Http://andymao.com/andy/demo/20070127/nav.htm