Pure css to implement Magicline Navigation (underline animated navigation menu)_html/css_WEB-ITnose

When I was looking at other people’s websites, I saw an animation of a navigation menu. I thought it was very interesting, so I studied it carefully.

There are three types of animations I have seen so far: horizontal underline animation navigation, horizontal background animation navigation, and vertical animation navigation. Their implementation ideas are the same, and they all rely on the same-level universal selector "~" of CSS3.

I implemented it myself. This article briefly records the implementation ideas.

You can take a look at the final effect first: Click here for Demo

Implementation ideas

HTML structure

The HTML structure is not special, it is ul -> ; li:

<ul class="a">  <li class="n1"><a href="#">Navigator A</a></li>  <li class="n2"><a href="#">Navigator B</a></li>  <li class="n3 selected"><a href="#">Navigator C</a></li>  <li class="n4"><a href="#">Navigator D</a></li>  <li class="quebec"> </li></ul>

The last li is empty and will be used later.

CSS layout

Implement the basic style, not much explanation:

  li {      list-style: none outside;      position: relative;      z-index: 1;      float: left;      padding: 0 0 0 0;  }  li a {      position: relative;      top: 5px;      display: block;      margin: 0 0;      border-bottom: 5px solid transparent;      padding: 10px 0;      text-align: center;      text-decoration: none;  }  .selected a {      border-bottom: 5px solid #cfd0d0;      color: #340e56;  }

Implement the navigation underline

The animation part is implemented below.

The purple scroll bar below is achieved through the last li element that was left just now.

 .quebec {      position: absolute;      bottom: -5px;      left: 0;      z-index: 3;      margin: 0;      border: 0;      width: 5px;      height: 5px;      padding: 0;      overflow: hidden;      text-indent: -9999em;      background: #511d7f;      -webkit-transition-property: left, width;      -moz-transition-property: left, width;      -ms-transition-property: left, width;      -o-transition-property: left, width;      transition-property: left, width;      -webkit-transition-duration: .5s;      -moz-transition-duration: .5s;      -ms-transition-duration: .5s;      -o-transition-duration: .5s;      transition-duration: .5s;  }

Use absolute positioning to position the last li.quebec below the navigation and set the width and height. Set transition so that animation can be achieved when we change left and width.

Mobile

When hovering over the navigation, li.quebec will position left below it. What achieves this effect is the CSS3 sibling universal selector "~"

For example, A ~ B matches any sibling B element after the A element.

  .n1:hover ~ li.quebec { left: 0; width: 95px; }  .n2:hover ~ li.quebec { left: 100px; width: 95px; }  .n3:hover ~ li.quebec { left: 192px; width: 95px; }  .n4:hover ~ li.quebec { left: 285px; width: 95px; }

Here is a pure CSS underline animated navigation. Final effect: Demo view

Extension

After we implement horizontal underline animation navigation, the idea of ​​implementing background moving animation navigation is the same, but it is the change of the height and width of li.quebec, background Transparency changes.

The same is true for vertical animated navigation, change the height and width of li.quebec, and control its position in the vertical direction through translateY.

In order to make the effect more dazzling, we can also change the color, background, transparency, etc. of li.quebec when hovering different li.