简要教程
这是一款使用纯CSS3制作的带下划线跟随效果的下拉菜单特效。该下拉菜单通过CSS3 transform和transition来制作下划线跟随效果和下拉菜单效果。
使用方法
HTML结构
该下拉菜单使用
<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样式
整个菜单ul#mian的定位方式采用相对定位方式。display显示为内联块级元素。菜单项通过padding来设置尺寸，并设置最小宽度min-width为120像素。
#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;
}在HTML结构中，ul.drop是下拉菜单组件。它的定位方式采用绝对定位。它里面的p元素使用translate函数在Y轴上移动-100%，使它隐藏起来（.drop上使用了overflow:hidden）。
.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是下划线元素。它也使用绝对定位。并为所有动画设置了0.35秒的动画过渡效果。
#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;
}在鼠标滑过菜单项#main li元素时，根据nth-child来判断当前鼠标滑过哪个菜单项。然后将该菜单项中的子菜单的Y轴位置恢复为0，显示下拉菜单，同时根据不同的菜单项来设置translate函数的X方向移动值来移动下划线。
#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);
}以上就是简单带下划线跟随效果的CSS3下拉菜单特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！
相关文章：
