首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

一款纯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-style: none;   
  11.   margin: 0;   
  12.   padding: 0;   
  13. }   
  14. .W1-h16 ul {   
  15.   position: relative;   
  16.   z-index: 500;   
  17.   float: left;   
  18. }   
  19. .W1-h16 ul li {   
  20.   float: left;   
  21.   min-height: 0.05em;   
  22.   line-height: 1em;   
  23.   vertical-align: middle;   
  24.   position: relative;   
  25. }   
  26. .W1-h16 ul li.hover,   
  27. .W1-h16 ul li:hover {   
  28.   position: relative;   
  29.   z-index: 510;   
  30.   cursor: default;   
  31. }   
  32. .W1-h16 ul ul {   
  33.   visibility: hidden;   
  34.   position: absolute;   
  35.   top: 100%;   
  36.   left: 0px;   
  37.   z-index: 520;   
  38.   width: 100%;   
  39. }   
  40. .W1-h16 ul ul li {   
  41.   float: none;   
  42. }   
  43. .W1-h16 ul ul ul {   
  44.   top: 0;   
  45.   rightright: 0;   
  46. }   
  47. .W1-h16 ul li:hover > ul {   
  48.   visibility: visible;   
  49. }   
  50. .W1-h16 ul ul {   
  51.   top: 0;   
  52.   left: 99%;   
  53. }   
  54. .W1-h16 ul li {   
  55.   float: none;   
  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', Tahoma, Arial, sans-serif;   
  64.   zoom: 1;   
  65. }   
  66. .W1-h16:before {   
  67.   content: '';   
  68.   display: block;   
  69. }   
  70. .W1-h16:after {   
  71.   content: '';   
  72.   display: table;   
  73.   clear: both;   
  74. }   
  75. .W1-h16 a {   
  76.   display: block;   
  77.   padding: 1em 1.3em;   
  78.   color: #ffffff;   
  79.   text-decoration: none;   
  80.   text-transform: uppercase;   
  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.   position: relative;   
  101. }   
  102. .W1-h16 ul li.has-sub > a:after {   
  103.   content: '»';   
  104.   position: absolute;   
  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.   border: 1px 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-bottom: 1px 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-right: none;   
  142. }   
  143. .W1-h16.align-rightright {   
  144.   float: rightright;   
  145. }   
  146. .W1-h16.align-rightright li {   
  147.   text-align: rightright;   
  148. }   
  149. .W1-h16.align-rightright ul li.has-sub > a:before {   
  150.   content: '+';   
  151.   position: absolute;   
  152.   top: 50%;   
  153.   left: 15px;   
  154.   margin-top: -6px;   
  155. }   
  156. .W1-h16.align-rightright ul li.has-sub > a:after {   
  157.   content: none;   
  158. }   
  159. .W1-h16.align-rightright ul ul {   
  160.   visibility: hidden;   
  161.   position: absolute;   
  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的响应式二级导航菜单

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
利用CSS3的定位页面元素
Aug 29 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 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
结构体(1) 指针(1) map(4) 蒙特卡罗(1) Pillow(2) 微信小程序(9) random(1) vue-esign(1) pdfkit(1) WeUI(1)
You might like
php购物车实现代码
2011/10/10 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
Document 对象的常用方法
2009/07/31 Javascript
js 替换功能函数，用正则表达式解决，js的全部替换
2010/12/08 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
轻松创建nodejs服务器（10）：处理POST请求
2014/12/18 NodeJs
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
React学习之JSX与react事件实例分析
2020/01/06 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
python解析xml文件实例分析
2015/05/27 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python实现的弹球小游戏示例
2017/08/01 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
打造经典复古风格的品牌：Alice + Olivia（爱丽丝+奥利维亚）
2016/09/07 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
写字楼租赁意向书
2014/07/30 职场文书
反腐倡廉观后感
2015/06/08 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏