How do I use a pure CSS to create effects navigation bars?

First, how to use pure CSS to create the following effects?

You can slow down before you continue reading the following. Try to think about the effect above or try it out, without using JS, can skillfully achieve the above effect.

OK, go ahead. This effect is a similar small problem I encountered in the process of business development. In fact, even if I use Javascript, my first reaction is also, feel very troublesome ah. So I have been thinking, is it possible to use only CSS to do this effect?

Define Requirements

We define simple rules that require the following:

<ul>  <li> Magic css</li>  <li> navigation bar </li>  <li> cursor Small underline following </li>  <li>pure css</li>  <li>nav underline</li></ul>

• The width of Li in the navigation column is not fixed.

• When Li is moved from the left side of the navigation to the right Li, the underscore moves from left to right. Similarly, when Li moves from the right side of the navigation to the left Li, the underscore moves from right to left.

Meet your needs

The first sight of this effect, the feeling that the following animation, only by CSS is impossible to complete. If you want to implement only CSS, you can use a few flattering methods. Okay, here's some artifice, using CSS to do this one step at a pace. Analyze the difficulty:

Width not fixed

The first difficulty is that the width of Li is not fixed. So, we may need to fuss from the width of Li itself. Since the width of each Li is not necessarily, then the length of its corresponding underline, it must be to adapt to his own. Naturally, we would have thought of using its border-bottom.

Li {border-bottom:2px solid #;}

Well, it may be this way (Li is connected together, the gap between Li is generated using padding):

Of course, there are no underscores at first, so we may need to hide them.

Li {border-bottom:0px solid #;}

Overthrow, with the help of pseudo-elements

This seems to not work, because after hiding, hover Li, need underline animation, and Li itself must not move. Therefore, we consider the use of pseudo-elements. The underscore acts on top of each Li's pseudo-element.

Li::before {  "";  Position:absolute;   0 ;   0 ;   %;   %;  Border-bottom:2px solid #;}

Consider the first step of the animation, when the hover, underline to move from one side of the motion. So, we use absolute positioning, the width of the pseudo element of Li set to 0, when hover, the width from width:0, Width:100%,css is as follows:

Li::before {  "";  Position:absolute;   0 ;   0 ;   0 ;   %;  Border-bottom:2px solid #;} Li:hover::before {    %;} 

Get the following effect:

Move left, left, right, right.

OK, feel close to the success of a step. Now there is one of the hardest questions left:

How to make the line follow the move action of the cursor, when Li moves from the left side of the navigation to the right Li, the underscore moves from left to right. Similarly, when Li moves from the right side of the navigation to the left Li, the underscore moves from right to left.

Let's take a closer look at the effect now:

When switching from the first Li to the second Li, the first Li underline is not in the correct direction. So, can we need to shift the initial position of the underscore, set to left:100%, so that each time the underscore is retracted, the first Li is correct:

Li::before {  "";  Position:absolute;   0 ;   %;   0 ;   %;  Border-bottom:2px solid #;} Li:hover::before {  0;   %;}

Look at the effect:

Well, compare the two pictures carefully, the second effect is actually penny Wise lost the watermelon. The first Li is in the right direction, but the second Li underline is moving in a wrong direction.

Magical ~ Selector

Therefore, we urgently need a method that can not change the current hover of Li's underline movement, but can change its next Li's underline moving way (good around the mouth).

Yes, here we can use the ~ Selector to complete this difficult mission, and this is the most important part of this example.

For the current hover Li, its corresponding pseudo-element underline positioning is left:100%, and for li:hover ~ Li::before, their positioning is left:0. The CSS code is roughly as follows:

Li::before {content:"";  Position:absolute; Top:0; Left: -%; Width:0; Height: -%; Border-BOTTOM:2PX Solid # the; Transition:0. 2s all linear;} Li:hover::before {width: -%; Left:0;} Li:hover~Li::before {left:0;}

At this point, we want to achieve the effect of pull! Sprinkle flowers. Look:

The effect is good, is a bit stiff, we can change the easing function and add an animation delay , you can achieve the above-mentioned effect in the beginning. Of course, these are the icing on the cake.

(reproduced in the Internet)

How do I use a pure CSS to create effects navigation bars?