HTML5导航下划线,CSS导航下划线实现
在做页面的时候发现页面导航栏有一个很棒的效果。具体的效果就是,当鼠标移到一个导航栏时,导航栏下方会缓慢出现一条线。
当用ui内联的方式实现普通的导航后,在html中的li添加一个class用来控制下划线的移动。
html部分:
首页
最新活动
项目介绍
爱心社区
关于我们
css部分,主要是对move部分的控制。对move部分设置border-top并设置宽度,设置position属性调整下划线
位置使下划线处于导航栏的下方。另一个重点就是用trisition对width实现效果的渐变.
css部分:
#d1 .top ul {
display: inline-block;
position: absolute;
right:20%;
margin-top: -44px;
box-sizing: border-box;
cursor: pointer;
}
#d1 .top ul li{
padding: 2px;
color: #4E3A4F;
list-style: none;
display: inline-block;
margin: 10px;
float: left;
box-sizing: border-box;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
-webkit-transition: border 0.4s ease-in-out;
-moz-transition: border 0.4s ease-in-out;
-ms-transition: border 0.4s ease-in-out;
-o-transition: border 0.4s ease-in-out;
transition: border 0.4s ease-in-out;
}
#d1 .top ul li:hover{
color: red;
}
#d1 .top ul li.move{
width: 65px;
border-top: 4px solid red ;
position: absolute;
top: 31px;
left: 35px;
-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-ms-transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
}
关键部分在于这里对left的设置,设置hover时,move也就是下划线出现的位置,通过hover不同的块使left不断改变实现下划线的移动。
#d1 .top ul li:nth-child(1):hover~.move{
left: 0;
}
#d1 .top ul li:nth-child(2):hover~.move{
left: 20%;
}
#d1 .top ul li:nth-child(3):hover~.move{
left: 40%;
}
#d1 .top ul li:nth-child(4):hover~.move{
left: 60%;
}
#d1 .top ul li:nth-child(5):hover~.move{
left: 80%;
HTML5导航下划线,CSS导航下划线实现相关推荐
- php css下划线,CSS文字下划线的设置方法介绍
在整体网页设计中,最容易识别的风格仍然是带有下划线的蓝色文字,这大部分都是链接到另一个网页中.链接元素默认具有样式,蓝色是默认模式下的唯一颜色.即使现在的链接元素可能不再需要加下划线,文本下的行不仅仅 ...
- php css下划线,css如何清除下划线?css清除下划线有哪些方法
css怎么清除下划线?css去除下划线方法有哪些?很多人可能还不知道怎么操作,下面我们来讲解一下. 在css中,我们可以使用text-decoration属性来表示下划线和删除线等样式,首先我们要了解 ...
- html下拉菜单触摸显示,CSS导航:纯CSS触碰式下拉菜单
[破洛洛教学网] 纯CSS触碰式下拉菜单 /* 整体设置*/ .navigation { margin:0; padding:0; width:610px; list-style-type:none; ...
- php网页设计导航栏代码,CSS导航栏及弹窗示例代码
最近整理了CSS导航栏及弹窗,具体如下: CSS导航 先来看下效果: Insert your title body{ font-size:12px; } #discuss{ width:990px; ...
- css怎样让导航词语间隔,css - 导航分隔符
css - 导航分隔符 我需要在导航元素之间添加分隔符. 分隔符是图像. 我的HTML结构如下:ol> li> a> img. 在这里,我得出两个可能的解决方案 要添加更多li标签进 ...
- html取消ul下划线,css – 删除下划线:hover:before
在以下示例中,我使用字体为我的导航创建图标: http://www.blackcountrydesigns.co.uk/examples/green/ 我遇到的问题是,当您将鼠标悬停在链接上时,您会在 ...
- 导航居中分布css,导航居中背景色通栏显示 DIV + CSS 代码
有时候我们用到导航栏居中显示,但是有通栏背景色的效果,比如本站现在(2017年12月)的导航栏就是通栏背景的.经过调试,发现了一个非常简单的通栏背景的 DIV + CSS 代码,首先看 CSS 代码: ...
- HTML文本下划线效果,css文本下划线怎么打?
对字体文字加下划线样式,有两种方法,一直直接使用html下划线标签,另外一种是使用CSS下划线样式.下面我们来看一下使用css样式对文字加下划线的方法. css样式实现下划线样式: 使用CSS样式单词 ...
- css 导航栏下划线跟随效果,默认第一个li为选中状态
本次主要是联系css实现导航栏下划线跟随效果 HTML: <ul id="list"><li class="current_li">&l ...
最新文章
- c# 获取ajax数据,c# asp.net jQuery AJAX 从 MySQL 中获取数据
- CoGAN 和 SeGAN
- gpg加解密软件学习
- echarts地图动画和java_echarts 实现中国地图
- Unity3D基础24:LineRenderer特效
- java 单选按钮怎么重置_单选框-复选框重置的方法
- 突发,Spring框架发现重大漏洞!
- 怎么看python帮助手册常见问题商家认证_问题:使用help命令可以查看python模块的帮助文档。...
- 圆柱体积计算机公式,圆柱体积计算公式
- tangent space /handness
- C语言入门(一):基础语法
- R Markdown 如何使用外部css
- notes 常见问题
- 产品经理-能力、技能要求
- 在下图的基础上,一笔写出“田”字
- Python入门之类的继承
- 【计算机毕设之基于springboot的救灾物资管理系统-哔哩哔哩】 https://b23.tv/jtV9Bib
- Kaggle上的狗品种识别(ImageNet Dogs)
- 长时间戴太阳镜可使视力下降
- VueCli3开发订餐app项目
热门文章
- 运行项目时flask_sqlalchemy报错AttributeError: ‘LocalStack‘ object has no attribute ‘__ident_func__‘
- 手工AD Safe去广告教程
- 没什么卵用的 ICN 论文
- 1 游戏服务器开发的基本体系与服务器端开发的一些建议
- 深度学习模型部署的几种方法
- Ubuntu12.04启动时显示“超出频率范围”的解决方法
- k8s virtual cluster 虚拟集群多租户解决方案
- 集成灶一线品牌都有哪些?中国一线品牌集成灶排名情况
- CDH版本Hadoop下载
- WEB数据库管理平台kb-dms:数据统计【十二】