CSS3 drop-down menu effect with simple underlined follow effects

Brief tutorials

This is a drop-down menu effect with an underlined follow effect made with pure CSS3. The drop-down menu uses CSS3 transform and transition to create an underscore follow effect and drop-down menu effect.

How to use

HTML structure

The drop-down menu uses the <nav> element to wrap an unordered list.

<nav>  <ul id= "main" >    <li> Home </li>    <li> about us </li>    <li> Item Category      <ul class= "Drop" >        <p>        <li>scss</li>        <li>jquery</li>        <li>html</li>        </p>      </ul>    </li>    <li> Contact Us </li>    <p id= "marker" ></p>  </ul></nav>

CSS Styles

The Ul#mian of the whole menu adopts relative positioning method. The display is displayed as an inline block-level element. menu items are set by padding, and the minimum width 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 a 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, making it hidden (the Overflow:hidden is used on the 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是下划线元素. It also uses absolute positioning. and set a 0.35-second animation transition effect 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 hovers over the menu item #main The LI element, the current mouse is nth-child to determine which item is currently being slid over. It then restores the y-axis position of the submenu in the menu item to 0, displays the drop-down menu, and sets the X-direction movement value of the translate function according to different menu items to move the underline.

#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 a simple underlined follow effect of the CSS3 drop-down menu effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

Related articles:

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

CSS drop-down menu

CSS drop-down menu detailed

