简要教程

这是一款使用纯CSS3制作的带下划线跟随效果的下拉菜单特效。该下拉菜单通过CSS3 transform和transition来制作下划线跟随效果和下拉菜单效果。

使用方法

HTML结构

该下拉菜单使用元素来包裹一个无序列表。

• 主页
• 关于我们
• 项目分类
  • scss
  • jquery
  • html
• 联系我们

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

相关文章：