html5 箭头形状导航条,css实现带箭头的导航条
要实现这种导航条,首先要知道箭头是怎么做出来。
http://www.cnblogs.com/daxiong/articles/3158630.html
这里说了用css做箭头的原理和实现。
知道怎么做箭头后,实现起来就很简单了。
我用css伪类:before和 :after实现箭头,
.left:before,.right:before {
position: absolute;
content: "";
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent
transparent transparent #1E97EC;
left: 1px;
}
.left:after,.right:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent
transparent transparent #FFF;
left:
-1px;
}
这样就有前后箭头了,接着只要微调一下就可以了。
第一个和最后一个,只要把对应的div去掉
(.left或者.right),再加个border-left,或者border-right就可以了
以下是代码
css :
.nav-item {
border-top: 1px solid #1E97EC;
border-bottom: 1px solid #1E97EC;
width: 200px;
height: 38px;
line-height: 38px;
text-align: center;
display: inline-block;
position: relative;
margin-right: 20px;
cursor: pointer;
}
.left,.right {
position: absolute;
top: -1px;
}
.left {
left: 0px;
}
.right {
right: 1px;
}
.left:before,.right:before {
position: absolute;
content: "";
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent
transparent transparent #1E97EC;
left: 1px;
}
.left:after,.right:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent
transparent transparent #FFF;
left:
-1px;
}
.nav-left {
border-left: 1px solid #1E97EC;
}
.nav-right {
border-right: 1px solid #1E97EC;
}
.no-permission {
background-color: rgba(0,0,0, .6);
}
.nav .active {
background-color: rgba(30, 151, 236, 0.6);;
}
.nav .active .right:after {
border-color: transparent transparent transparent rgb(120, 192,
243);
}
html:
你好
你好
你好
你好
你好
js:
$('.nav-item').on('click',function(){
if(!$(this).hasClass('no-permission')){
$(this).addClass("active").siblings('.nav-item').removeClass('active');
}
})
html5 箭头形状导航条,css实现带箭头的导航条相关推荐
- html画一条线并带箭头,手把手教你用CSS实现带箭头的流程进度条
本文介绍的是利用纯CSS的带箭头流程进度条,兼容到IE8,需要的朋友们下面来一起学习学习. 首先写出一个基本的样式. .cssNav li{ padding: 0px 20px; line-heigh ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- android 带箭头的按钮,用Dialog创建带箭头的对话框
很多应用中,在点击Button后,会弹出一个带箭头的对话框,指向这个Button.网上查了,很多人都说用PopupWindow可以实现,我对PopupWindow不熟,于是试着用Dialog实现.(需 ...
- d3关联关系图力引导图,支持多条线,带箭头。
代码链接:https://download.csdn.net/download/qq_42080160/11453702最实用d3关联关系力引导图,只需要引用一个js,向页面传一个josn串:写了非常 ...
- css竖向箭头符号_用css制作空心箭头(上下左右各个方向均有)
css制作空心的上下左右的箭头 *{padding:0;margin:0; }.box{width:100px;height:500px;margin:0 auto;border:1px solid ...
- CSS带箭头的提示框实现
Abstract 在使用markdown编辑器写博客的时候,发现了这个提示框很好看,如下图: 图一:带箭头提示框图 图二:普通提示框 下面就来依次实现一下. 2. Related Da ...
- android 带箭头提示框,三种带箭头提示框总结实例
无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是css来实现,本文介绍三种通过css实现带箭头的提示框. 1.通过border属性 思路:两个三角形,通过定位使 ...
- vue项目中画出优雅的线条(虚线、直线、折线、带箭头、流动效果等)
需求:运行监控图模块,模块之间用虚线或者实线连接,且带有箭头 实现方法: 1.canvas绘制 2.echarts专业的表格软件(画带箭头的虚线有难度) 3.svg方法 4.leader-line插件 ...
- matlab中画带箭头向量,几何画板中如何画带箭头的向量
在学习了向量的相关知识后,我们都知道几何向量(也称为欧几里得向量,通常简称向量.矢量),指具有大小和方向的量.那么几何画板做为最专业的几何绘图工具,也可以用来绘制向量.如果你还不知道怎么在几何画板中画 ...
最新文章
- c++ 调用 ffmpeg 编程
- CentOS7中离线安装Docker与卸载
- C#方法重载(overload)方法重写(override)隐藏(new)
- sql每一个join都要加on
- Django报错NameError: name 'ListView' is not defined
- 网络安全04_互联网发展史_网线+网卡+协议栈_中继器_集线器_网桥_路由器_AC/AP_防火墙_流控_家庭网络_小型创业公司网络_园区网_政务网络_数据中心网络拓扑_电信网/互联网_Mac地址
- 详解预训练模型、信息抽取、文本生成、知识图谱、对话系统技术
- 在Blazor中构建数据库应用程序——第6部分——向天气应用程序添加新记录类型及其UI
- android aidl和普通service
- 十、Mysql执行计划详细解析
- 浅谈的数据库设计原则-之账户体系的分析
- DAHON 美国大行
- SSM订单数据管理系统
- 彻底弄懂TIME_WAIT 及 tcp_tw_reuse选项
- 决策树分类算法三种方式
- Pytorch报错解决:The size of tensor a (4) must match the size of tensor b (3) at non-singleton dimensio
- 使用CSS更改hr标签的厚度
- 高德地图的基础使用(二)定位蓝点
- 上海家政圈已经这么卷了吗。。。
- 华东师范大学计算机试题,(华东师范大学计算机考试习题.doc