一款纯css3实现的竖形二级导航的实例教程


Posted in HTML / CSS onDecember 11, 2014

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

一款纯css3实现的竖形二级导航的实例教程

实现的代码。

html代码:

XML/HTML Code复制内容到剪贴板
  1. <div style="width: 700px; margin: auto;">  
  2.         <div class="W1-h16">  
  3.             <ul>  
  4.                 <li class="has-sub"><a href="#">Menu 1</a>  
  5.                     <ul>  
  6.                         <li class="has-sub"><a href="#">Submenu 1.1</a>  
  7.                             <ul>  
  8.                                 <li><a href="#">Submenu 1.1.1</a></li>  
  9.                                 <li class="has-sub"><a href="#">Submenu 1.1.2</a>  
  10.                                     <ul>  
  11.                                         <li><a href="#">Submenu 1.1.2.1</a></li>  
  12.                                         <li><a href="#">Submenu 1.1.2.2</a></li>  
  13.                                     </ul>  
  14.                                 </li>  
  15.                             </ul>  
  16.                         </li>  
  17.                         <li><a href="#">Submenu 1.2</a></li>  
  18.                     </ul>  
  19.                 </li>  
  20.                 <li class="has-sub"><a href="#">Menu 2</a>  
  21.                     <ul>  
  22.                         <li><a href="#">Submenu 2.1</a></li>  
  23.                         <li><a href="#">Submenu 2.2</a></li>  
  24.                     </ul>  
  25.                 </li>  
  26.                 <li class="has-sub"><a href="#">Menu 3</a>  
  27.                     <ul>  
  28.                         <li><a href="#">Submenu 3.1</a></li>  
  29.                         <li><a href="#">Submenu 3.2</a></li>  
  30.                     </ul>  
  31.                 </li>  
  32.             </ul>  
  33.         </div>  
  34.     </div>  

css3代码:

CSS Code复制内容到剪贴板
  1. .W1-h16 {   
  2.   padding: 0;   
  3.   margin: 0;   
  4.   border: 0;   
  5.   line-height: 1;   
  6. }   
  7. .W1-h16 ul,   
  8. .W1-h16 ul li,   
  9. .W1-h16 ul ul {   
  10.   list-stylenone;   
  11.   margin: 0;   
  12.   padding: 0;   
  13. }   
  14. .W1-h16 ul {   
  15.   positionrelative;   
  16.   z-index: 500;   
  17.   floatleft;   
  18. }   
  19. .W1-h16 ul li {   
  20.   floatleft;   
  21.   min-height: 0.05em;   
  22.   line-height: 1em;   
  23.   vertical-alignmiddle;   
  24.   positionrelative;   
  25. }   
  26. .W1-h16 ul li.hover,   
  27. .W1-h16 ul li:hover {   
  28.   positionrelative;   
  29.   z-index: 510;   
  30.   cursordefault;   
  31. }   
  32. .W1-h16 ul ul {   
  33.   visibilityhidden;   
  34.   positionabsolute;   
  35.   top: 100%;   
  36.   left0px;   
  37.   z-index: 520;   
  38.   width: 100%;   
  39. }   
  40. .W1-h16 ul ul li {   
  41.   floatnone;   
  42. }   
  43. .W1-h16 ul ul ul {   
  44.   top: 0;   
  45.   rightright: 0;   
  46. }   
  47. .W1-h16 ul li:hover > ul {   
  48.   visibilityvisible;   
  49. }   
  50. .W1-h16 ul ul {   
  51.   top: 0;   
  52.   left: 99%;   
  53. }   
  54. .W1-h16 ul li {   
  55.   floatnone;   
  56. }   
  57. .W1-h16 ul ul {   
  58.   margin-top: 0.05em;   
  59. }   
  60. .W1-h16 {   
  61.   width: 13em;   
  62.   background#333333;   
  63.   font-family'Oxygen Mono'TahomaArialsans-serif;   
  64.   zoom: 1;   
  65. }   
  66. .W1-h16:before {   
  67.   content'';   
  68.   displayblock;   
  69. }   
  70. .W1-h16:after {   
  71.   content'';   
  72.   display: table;   
  73.   clearboth;   
  74. }   
  75. .W1-h16 a {   
  76.   displayblock;   
  77.   padding: 1em 1.3em;   
  78.   color#ffffff;   
  79.   text-decorationnone;   
  80.   text-transformuppercase;   
  81. }   
  82. .W1-h16 > ul {   
  83.   width: 13em;   
  84. }   
  85. .W1-h16 ul ul {   
  86.   width: 13em;   
  87. }   
  88. .W1-h16 > ul > li > a {   
  89.   border-right: 0.3em solid #1b9bff;   
  90.   color#ffffff;   
  91. }   
  92. .W1-h16 > ul > li > a:hover {   
  93.   color#ffffff;   
  94. }   
  95. .W1-h16 > ul > li a:hover,   
  96. .W1-h16 > ul > li:hover a {   
  97.   background#1b9bff;   
  98. }   
  99. .W1-h16 li {   
  100.   positionrelative;   
  101. }   
  102. .W1-h16 ul li.has-sub > a:after {   
  103.   content'»';   
  104.   positionabsolute;   
  105.   rightright: 1em;   
  106. }   
  107. .W1-h16 ul ul li.first {   
  108.   -webkit-border-radius: 0 3px 0 0;   
  109.   -moz-border-radius: 0 3px 0 0;   
  110.   border-radius: 0 3px 0 0;   
  111. }   
  112. .W1-h16 ul ul li.last {   
  113.   -webkit-border-radius: 0 0 3px 0;   
  114.   -moz-border-radius: 0 0 3px 0;   
  115.   border-radius: 0 0 3px 0;   
  116.   border-bottom: 0;   
  117. }   
  118. .W1-h16 ul ul {   
  119.   -webkit-border-radius: 0 3px 3px 0;   
  120.   -moz-border-radius: 0 3px 3px 0;   
  121.   border-radius: 0 3px 3px 0;   
  122. }   
  123. .W1-h16 ul ul {   
  124.   border1px solid #0082e7;   
  125. }   
  126. .W1-h16 ul ul a {   
  127.   color#ffffff;   
  128. }   
  129. .W1-h16 ul ul a:hover {   
  130.   color#ffffff;   
  131. }   
  132. .W1-h16 ul ul li {   
  133.   border-bottom1px solid #0082e7;   
  134. }   
  135. .W1-h16 ul ul li:hover > a {   
  136.   background#4eb1ff;   
  137.   color#ffffff;   
  138. }   
  139. .W1-h16.align-rightright > ul > li > a {   
  140.   border-left: 0.3em solid #1b9bff;   
  141.   border-rightnone;   
  142. }   
  143. .W1-h16.align-rightright {   
  144.   floatrightright;   
  145. }   
  146. .W1-h16.align-rightright li {   
  147.   text-alignrightright;   
  148. }   
  149. .W1-h16.align-rightright ul li.has-sub > a:before {   
  150.   content'+';   
  151.   positionabsolute;   
  152.   top: 50%;   
  153.   left15px;   
  154.   margin-top: -6px;   
  155. }   
  156. .W1-h16.align-rightright ul li.has-sub > a:after {   
  157.   contentnone;   
  158. }   
  159. .W1-h16.align-rightright ul ul {   
  160.   visibilityhidden;   
  161.   positionabsolute;   
  162.   top: 0;   
  163.   left: -100%;   
  164.   z-index: 598;   
  165.   width: 100%;   
  166. }   
  167. .W1-h16.align-rightright ul ul li.first {   
  168.   -webkit-border-radius: 3px 0 0 0;   
  169.   -moz-border-radius: 3px 0 0 0;   
  170.   border-radius: 3px 0 0 0;   
  171. }   
  172. .W1-h16.align-rightright ul ul li.last {   
  173.   -webkit-border-radius: 0 0 0 3px;   
  174.   -moz-border-radius: 0 0 0 3px;   
  175.   border-radius: 0 0 0 3px;   
  176. }   
  177. .W1-h16.align-rightright ul ul {   
  178.   -webkit-border-radius: 3px 0 0 3px;   
  179.   -moz-border-radius: 3px 0 0 3px;   
  180.   border-radius: 3px 0 0 3px;   
  181. }  

相关推荐:

 一款基于jquery和css3的响应式二级导航菜单

HTML / CSS 相关文章推荐
CSS3属性background-size使用指南
Dec 09 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 #HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 #HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 #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
You might like
3
2006/10/09 PHP
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
javascript数组的使用
2013/03/28 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
原生js实现日期联动
2015/01/12 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Python语言进阶知识点总结
2019/05/28 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
英文简历自荐信范文
2013/12/11 职场文书
安全大检查反思材料
2014/01/31 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
带你了解Java中的ForkJoin
2022/04/28 Java/Android