专栏首页蚂蚁开源社区简单带下划线跟随效果的CSS3下拉菜单特效

简单带下划线跟随效果的CSS3下拉菜单特效

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

简要教程

HTML结构

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

<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); }

源码演示/下载请点击阅读原文

↓↓↓↓↓↓

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:思齐大神

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 技术人生:说说技术总监的“三板斧”

    作为一个老技术人,今天不聊技术,就聊点技术人员职业发展的事情:对技术管理岗位的认知,比如技术总监。

    用户5997198
  • 开源团队管理微信小程序【含服务端和客户端】

    用户5997198
  • 【小程序】公司OA管理源码下载

    用户5997198
  • 【小家Spring】Spring环境中(含Boot环境),web组件(Servlet、Filter)内注入使用Spring容器里的Bean

    在日常web开发中,我们经常会使用到Filter,这个组件最经典的使用场景就是鉴权。比如现在的JWT鉴权模式,所有的请求都应该携带一个Token,然后我们在Fi...

    YourBatman
  • 【玩转腾讯云】GPU云服务器(开发篇)

    在上一篇中大家已经熟悉了GPU服务器创建及初始化步骤,那么接下来该如何具体远程开发?如何调试代码、同步数据呢?

    溪歪歪
  • 躺平平台背后,家居原创设计红利等待爆发

    9月27日,淘宝发布了全新的家居平台——躺平,希望涵盖从生产、设计到消费的家居家装全链路,从而让消费者“躺着”就能获取一站式的解决方案。

    刘旷
  • Cocos2d-x-v3动作体系 原

            cocos2d-x-v3版本v2的版本有的很大的改动,最直观的是在一些函数的改动和类名的改动上,首先以CC开头的类,都不再使用CC。在我个人的理...

    珲少
  • 动手定制一个开发板案例

    前面通过学习总线、设备、驱动模型知识后,知道了设备和驱动之间都是通过总线进行绑定而匹配的;然后通过设备树的深入探究,知道了设备树的出现大大增加了驱动的通用性;接...

    刘盼
  • 南京大学南京智能计算芯片研究院曹华锋:打造产业合作平台,从产学研侧联动推进IC技术落地丨镁客请讲

    2016年,《国家创新驱动发展战略纲要》和《“十三五”国家科技创新规划》均提出,要发展面向市场的新型研发机构,为的就是激发社会创造力。后在两年时间内,依托于各类...

    镁客网
  • sql sql 数据定义语言 (DDL)

    SQL 的数据定义语言 (DDL) 部分使我们有能力创建或删除表格。我们也可以定义索引(键),规定表之间的链接,以及施加表间的约束。

    葫芦

扫码关注云+社区

领取腾讯云代金券