Home  >  Article  >  Web Front-end  >  Simple CSS3 drop-down menu effect with underline follow effect

Simple CSS3 drop-down menu effect with underline follow effect

黄舟
黄舟Original
2017-03-20 11:44:102502browse

Brief Tutorial

This is a drop-down menu effect with underline following effect made using pure CSS3. The drop-down menu uses CSS3 transform and transition to create underline follow effects and drop-down menu effects.

Usage

HTML structure

The drop-down menu uses the c787b9a589a3ece771e842a6176cf8e9 element to wrap an unordered list.

<nav>
  <ul id="main">
    <li>主页</li>
    <li>关于我们</li>
    <li>项目分类
      <ul class="drop">
        <p>
        <li>scss</li>
        <li>jquery</li>
        <li>html</li>
        </p>
      </ul>
    </li>
    <li>联系我们</li>
    <p id="marker"></p>
  </ul>
</nav>

CSS style

The entire menu ul#mian is positioned using relative positioning. display is displayed as an inline block-level element. Menu items are sized using padding, and min-width is set to 120 pixels.

#main {
  position: relative;
  list-style: none;
  background: #6BBE92;
  font-weight: 400;
  font-size: 0;
  text-transform: uppercase;
  display: inline-block;
  padding: 0;
  margin: 50px auto;
}
#main li {
  font-size: 0.8rem;
  display: inline-block;
  position: relative;
  padding: 15px 20px;
  cursor: pointer;
  z-index: 5;
  min-width: 120px;
}
li {
  margin: 0;
}

In the HTML structure, ul.drop is the drop-down menu component. Its positioning method uses absolute positioning. The p element inside it uses the translate function to move -100% on the Y axis to make it hidden (overflow:hidden is used on .drop).

.drop {
  overflow: hidden;
  list-style: none;
  position: absolute;
  padding: 0;
  width: 100%;
  left: 0;
  top: 48px;
}
.drop p {
  -webkit-transform: translate(0, -100%);
  -moz-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  transform: translate(0, -100%);
  -webkit-transition: all 0.5s 0.1s;
  -moz-transition: all 0.5s 0.1s;
  -ms-transition: all 0.5s 0.1s;
  transition: all 0.5s 0.1s;
  position: relative;
}
.drop li {
  display: block;
  padding: 0;
  width: 100%;
  background: #3E8760 !important;
}

#marker is an underline element. It also uses absolute positioning. And set an animation transition effect of 0.35 seconds for all animations.

#marker {
  height: 6px;
  background: #3E8760 !important;
  position: absolute;
  bottom: 0;
  width: 120px;
  z-index: 2;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  transition: all 0.35s;
}

When the mouse slides over the menu item #main li element, use nth-child to determine which menu item the mouse currently slides over. Then restore the Y-axis position of the submenu in the menu item to 0, display the drop-down menu, and set the X-direction movement value of the translate function to move the underline according to different menu items.

#main li:nth-child(1):hover ul p {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#main li:nth-child(1):hover ~ #marker {
  -webkit-transform: translate(0px, 0);
  -moz-transform: translate(0px, 0);
  -ms-transform: translate(0px, 0);
  transform: translate(0px, 0);
}
 
#main li:nth-child(2):hover ul p {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#main li:nth-child(2):hover ~ #marker {
  -webkit-transform: translate(120px, 0);
  -moz-transform: translate(120px, 0);
  -ms-transform: translate(120px, 0);
  transform: translate(120px, 0);
}
 
#main li:nth-child(3):hover ul p {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#main li:nth-child(3):hover ~ #marker {
  -webkit-transform: translate(240px, 0);
  -moz-transform: translate(240px, 0);
  -ms-transform: translate(240px, 0);
  transform: translate(240px, 0);
}
 
#main li:nth-child(4):hover ul p {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#main li:nth-child(4):hover ~ #marker {
  -webkit-transform: translate(360px, 0);
  -moz-transform: translate(360px, 0);
  -ms-transform: translate(360px, 0);
  transform: translate(360px, 0);
}

The above is the content of the simple CSS3 drop-down menu effect with underline following effect. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Related articles:

Introduction to the simple method of making CSS drop-down menu

CSS drop-down menu

Detailed explanation of CSS drop-down menu

Statement:
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