Home > Web Front-end > HTML Tutorial > Pure css to implement Magicline Navigation (underline animated navigation menu)_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:45:14
Original
1145 people have browsed it

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>
Copy after login

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;  }
Copy after login

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;  }
Copy after login

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; }
Copy after login

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.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template