Shulou(Shulou.com)06/03 Report--

Xiaobian to share with you how to solve the tilt mouse flip navigation problem, I believe most people still do not know how to share this article for your reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

The day before yesterday online a friend sent me a page let me help her see why the mouse flip can not be achieved. I opened the source file and saw that the author did not master a mouse flip feature at all. And there's not enough thought about tilt navigation. Although I saw these problems at the time, I didn't have time to explain them to her because I was finishing a project at hand. Just yesterday, I was busy with my work. Now I picked up the document and looked at it. I found that many knowledge points can be explained through this incident. There are some places that people don't pay much attention to, but they are really very critical.

Let's look at the effects we want to achieve, which of course can only exist in our minds or sketches until we do them. We first have to think about what it looks like, and then we can analyze how we want to achieve the effect of reality. Let's not talk about it. Let's look at the picture first:

When we look at the picture above, we can feel that it seems nothing, as if it is easy to do. Okay, let's analyze this effect in detail. We can't insert an image directly into HTML if we use standards to implement it. To do this with standards, you need to use CSS to call the image as a background. Well, let's see if such navigation can be directly invoked, and if there are any problems? Here's a closer look at the navigation effect:

Notice the "danger zone" in the image above. Obviously, if we put two tilted positive blocks together, there must be a duplication zone. Our CSS does not support heteromorphism yet. To solve this problem, it is necessary to overlap the two squares. Overlap requires putting them on different levels. This is done using CSS: "position : static"| absolute | fixed | relative "。

To do mouse flip we usually make all the background into a picture, and then use CSS to set the different positions of the pictures under different labels. Some people think that the background image of this navigation should be like this:

If that's what you think, then the problem is that when you flip the mouse in any of the five blocks, the overlap in the danger zone above blocks the navigation on the left and right by a corner. So the normal way is:

Only in this way can it be used as the final background image if there is no danger zone. Of course, it should also be noted that the background is not white but transparent, mainly not to blend with the background of the website, the key is not to block the adjacent background in the danger zone. I use GIF images, GIF images have transparency when the edge will have a little rough. If you want to deal with different colors of the website background, it is best to use PNG or GIF image edge made point pixels.

After thinking about this background map we need to think about how to make this navigation. First to analyze this mouse flip, the original mouse flip is JS things, now you can through CSS: hover can also achieve this flip effect, less code, clear structure. So the five navigation flips here are implemented by A:hover.

The above is "how to solve the tilt mouse flip navigation problem" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.