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