纯css3实现的竖形无限级导航


Posted in HTML / CSS onDecember 10, 2014

之前为大家分享了好多导航菜单。今天给大家带来一款纯css3实现的竖形无限级导航。这款导航菜单可以是无限级。一起看下效果图:

纯css3实现的竖形无限级导航

实现的代码。

html代码:

复制代码
代码如下:

<div style="width: 700px; margin: auto;">
<div class="W1-h16">
<ul>
<li class="has-sub"><a href="#">Menu 1</a>
<ul>
<li class="has-sub"><a href="#">Submenu 1.1</a>
<ul>
<li><a href="#">Submenu 1.1.1</a></li>
<li class="has-sub"><a href="#">Submenu 1.1.2</a>
<ul>
<li><a href="#">Submenu 1.1.2.1</a></li>
<li><a href="#">Submenu 1.1.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Submenu 1.2</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Menu 2</a>
<ul>
<li><a href="#">Submenu 2.1</a></li>
<li><a href="#">Submenu 2.2</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Menu 3</a>
<ul>
<li><a href="#">Submenu 3.1</a></li>
<li><a href="#">Submenu 3.2</a></li>
</ul>
</li>
</ul>
</div>
</div>

css3代码:

复制代码
代码如下:

.W1-h16 {
padding: 0;
margin: 0;
border: 0;
line-height: 1;
}
.W1-h16 ul,
.W1-h16 ul li,
.W1-h16 ul ul {
list-style: none;
margin: 0;
padding: 0;
}
.W1-h16 ul {
position: relative;
z-index: 500;
float: left;
}
.W1-h16 ul li {
float: left;
min-height: 0.05em;
line-height: 1em;
vertical-align: middle;
position: relative;
}
.W1-h16 ul li.hover,
.W1-h16 ul li:hover {
position: relative;
z-index: 510;
cursor: default;
}
.W1-h16 ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0px;
z-index: 520;
width: 100%;
}
.W1-h16 ul ul li {
float: none;
}
.W1-h16 ul ul ul {
top: 0;
right: 0;
}
.W1-h16 ul li:hover > ul {
visibility: visible;
}
.W1-h16 ul ul {
top: 0;
left: 99%;
}
.W1-h16 ul li {
float: none;
}
.W1-h16 ul ul {
margin-top: 0.05em;
}
.W1-h16 {
width: 13em;
background: #333333;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
zoom: 1;
}
.W1-h16:before {
content: '';
display: block;
}
.W1-h16:after {
content: '';
display: table;
clear: both;
}
.W1-h16 a {
display: block;
padding: 1em 1.3em;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
.W1-h16 > ul {
width: 13em;
}
.W1-h16 ul ul {
width: 13em;
}
.W1-h16 > ul > li > a {
border-right: 0.3em solid #1b9bff;
color: #ffffff;
}
.W1-h16 > ul > li > a:hover {
color: #ffffff;
}
.W1-h16 > ul > li a:hover,
.W1-h16 > ul > li:hover a {
background: #1b9bff;
}
.W1-h16 li {
position: relative;
}
.W1-h16 ul li.has-sub > a:after {
content: '»';
position: absolute;
right: 1em;
}
.W1-h16 ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
.W1-h16 ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
.W1-h16 ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.W1-h16 ul ul {
border: 1px solid #0082e7;
}
.W1-h16 ul ul a {
color: #ffffff;
}
.W1-h16 ul ul a:hover {
color: #ffffff;
}
.W1-h16 ul ul li {
border-bottom: 1px solid #0082e7;
}
.W1-h16 ul ul li:hover > a {
background: #4eb1ff;
color: #ffffff;
}
.W1-h16.align-right > ul > li > a {
border-left: 0.3em solid #1b9bff;
border-right: none;
}
.W1-h16.align-right {
float: right;
}
.W1-h16.align-right li {
text-align: right;
}
.W1-h16.align-right ul li.has-sub > a:before {
content: '+';
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
.W1-h16.align-right ul li.has-sub > a:after {
content: none;
}
.W1-h16.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
.W1-h16.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
.W1-h16.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
.W1-h16.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}

效果非常的棒,这里推荐给大家。有问题也请及时反馈

HTML / CSS 相关文章推荐
css3之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 #HTML / CSS
CSS3属性background-size使用指南
Dec 09 #HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 #HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 #HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 #HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 #HTML / CSS
css3的transform中scale缩放详解
Dec 08 #HTML / CSS
You might like
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
php session劫持和防范的方法
2013/11/12 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
domReady的实现案例
2016/11/23 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
从零学Python之入门(五)缩进和选择
2014/05/27 Python
python字符串的常用操作方法小结
2016/05/21 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python