炫酷企业建站作品展示WordPress中文模板

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

导航菜单

首页 _ 全部文章 _ Code/特效 _ 导航菜单 _ 正文

下划线跟随CSS3下拉菜单特效

PetitQ 导航菜单 2019-3-10 2.33K 0 2

收藏

阿里云

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

HTML 结构

该下拉菜单使用

也想出现在这里？联系我们吧

创客主机

元素来包裹一个无序列表。

```
<nav>
```
```
  <ul id="main">
```
```
    <li>主页</li>
```
```
    <li>关于我们</li>
```
```
    <li>项目分类
```
```
      <ul class="drop">
```
```
        <div>
```
```
        <li>scss</li>
```
```
        <li>jquery</li>
```
```
        <li>html</li>
```
```
        </div>
```
```
      </ul>
```
```
    </li>
```
```
    <li>联系我们</li>
```
```
    <div id="marker"></div>
```
```
  </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 是下拉菜单组件。它的定位方式采用绝对定位。它里面的 div 元素使用 translate 函数在 Y 轴上移动-100%，使它隐藏起来（.drop 上使用了 overflow:hidden）。

```
.drop {
```
```
  overflow: hidden;
```
```
  list-style: none;
```
```
  position: absolute;
```
```
  padding: 0;
```
```
  width: 100%;
```
```
  left: 0;
```
```
  top: 48px;
```
```
}
```
```
.drop div {
```

  -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 div {
```
```
  -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 div {
```
```
  -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 div {
```
```
  -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 div {
```
```
  -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 下拉菜单特效

已有 582 人购买

永久更新：
演示数据：
提取码：b10f

1

查看演示升级 VIP 立刻购买

演示地址

下载地址

也想出现在这里？联系我们吧

创客云

Material Design 风格侧边栏菜单变形效果

纯CSS3滚动淡入淡出视觉差特效

相关文章

侧边栏菜单和下拉列表UI设计

导航菜单 6 年前 2.79K
sideToggle - 侧边栏jquery插件

导航菜单 6 年前 2.20K
Bootstrap右键上下文菜单插件

导航菜单 6 年前 1.64K

发表回复取消回复

要发表评论，您必须先登录。

流年似水

今日已经过去0小时

0%

这周已经过去0天

0%

本月已经过去0天

0%

今年已经过去0个月

0%

热门文章

Mac - 全屏摄影艺术相册展示模板WordPress中文主题

Mac - 全屏摄影艺术相册展示模板WordPress中文主题

原版主题 6 年前 5.75K

Mac - 全屏摄影艺术相册展示模板WordPress主题，该主题适合那些从事摄影，绘画或数字图形艺术家…

VideoPro - 专业视频网站电影网站WordPress主题

VideoPro - 专业视频网站电影网站WordPress主题

原版主题 8 年前 1.42W

VideoPro是最强大的视频网站WordPress主题。基于市场上最大的视频True Mag主题，Vi…

Elessi - AJAX电商网站模板WordPress主题

Elessi - AJAX电商网站模板WordPress主题

原版主题 5 年前 4.19K

可以使用Option Framework轻松定制Elessi，它具有通过SMOF强大的主题选项面板。该主…

Bronx - 时尚服饰购物商城网站WordPress主题

Bronx - 时尚服饰购物商城网站WordPress主题

原版主题, 汉化主题 8 年前 7.59K

Bronx WordPress深度汉化版是一款独特的Wordpress电商主题。自适应，Retina 支…

DUX-PRO创客云开发版WordPerss中文主题

DUX-PRO创客云开发版WordPerss中文主题

原版主题 10 年前 2.85W

DUX-PRO创客科技美化专业版WordPerss主题企业博客模板，此模板为创客独家二次开发，HTML5…

点击签到领取积分可下载全站资源！

今日签到

连续签到

onlisai

20分钟前

96
Canice

16小时前

296
shboxy

20小时前

569
S.

3天前

70
麦笛

3天前

665

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题

LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！