This is the fifth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

When you log in to huawei Cloud, you can see that the top navigation bar has a good effect and want to achieve one

First look at the general effect of huawei Cloud official website

Underline moves with mouse (above)

First of all, analyze the general approach:

  • Transition animations
  • Underlining has a process of growing to slow
  • The monitor mouse is under that column

In short, listen for mouse movement, and let the current navigation bar underline from 0 to 100%.

Take a wave of code and debug it slowly:

Followed < ul > < li > < / li > < li > navigation bar < / li > < li > cursor little underscore followed < / li > < li > follow move underlined < / li > < li > follow moving < / li > < / ul >Copy the code

The effect is as follows:

Then we let Li show us one line horizontally:

ul li {float: left; display: block; list-style: none; margin-left: 20px; border-bottom: 2 px black solid; position: relative; }Copy the code

Now that the navigation bar is working properly, it’s time to underline

  • Underline using pseudo elements
  • Moving the mouse over there shows the current pseudo-element
ul li::before {content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; border-bottom: 2px solid red; width: 100%; }Copy the code

That way, the underlining is visible at the bottom.The bottom underline is already there, and the next thing to do is to move the mouse over there and underline the navigation bar there, which hover can do

We can first make all li pseudo-class length 0, hover to the current when its width is 100%
ul li:hover::before {width: 100%; }Copy the code

Let’s look at the renderings:

We see that the mouse is moving under a navigation bar and the underline under the navigation bar is showing, but it’s a little stiff, so we’re going to set the transition here

The transition: 0.2 s all linear;Copy the code

This is the animation after setting the transition, and you can see the effect is getting closer and closer, but there are still two problems

  • Mouse away after the last underline back to the left to reduce
  • When the mouse moves up a navigation bar, it should move from right to left. It still moves from left to right

Train of thought

  • We set the left of each pseudo-class to 100%,
  • Set the left of the next navigation bar to 0

This will cause visual error and create mouse following effect, as shown in the picture below:Probably the effect is achieved, there is a problem with the hover first element underline moving position or from right to left growth, other effects are roughly the same as huawei cloud navigation bar, should use JS implementation, like the big guy can go to see themselves, I here to achieve a simple version of CSS implementation process

<! -- * @Descripttion: * @version: * @Author: shijuwang * @Date: 2021-08-02 17:23:57 * @LastEditors: shijuwang * @LastEditTime: 2021-08-02 15:09:41 -->Copy the code

Code address: >>> Project view

Code word is not easy, hope big guy give advice