多级导航,转自http://blog.csdn.net/rabbitter/article/details/51125337

转载 2017年06月27日 17:44:32

纯CSS多级导航栏

转自http://blog.csdn.net/rabbitter/article/details/51125337

标签: 纯CSS纯CSS多级导航栏
1185人阅读 评论(0) 收藏 举报
分类:

前一段时间再看《精通CSS》的时候,磕磕绊绊的写出了一个纯CSS导航栏,晚上突然想到了这个,把它重写一遍。在这个过程中发现自己比之前有了些许提高,我想应该是之前做的优酷整站练习的功劳吧,这个整站练习中收获良多,不仅是还原了设计图,而且不知不觉自己就有了提高。多实践才是正道。

题名为多级导航栏,以二级导航为例,在搞清楚原理的情况下,很简单就可以做出多级导航。效果如下:

原理:在无序列表中嵌套无序列表,一级导航中每个li标签里都嵌套一个无序列表作为二级菜单,即二级导航也是一个无序列表。

  1. <ul id="nav"><!--一级导航的ul-->  
  2.   
  3.     <li class="safe"><a href="safe.html">SAFETY</a><!--一级导航的li-->  
  4.         <ul><!--一级导航的li中的二级导航的ul-->  
  5.             <li><a href="http://cn.bing.com">After Effects</a></li><!--二级导航中各个选项li-->  
  6.             <li><a href="#">Open-Source Apps</a></li>  
  7.             <li><a href="#">Android</a></li>  
  8.             <li><a href="#">JavaScript</a></li>  
  9.         </ul>  
  10.     </li>  
  11. </ul>  
为了使二级导航定位到正确的位置,要设置一级导航中的li为相对定位,作为二级ul的定位对象,二级ul作绝对定位。

二级导航默认是不可见的,只有当一级导航中的li被鼠标移入时才用伪类hover让相对应的二级导航显示出来,可用两种方式使其不可见:

1.设置其为display:none;在鼠标移入时将其设置为:display:block;

2.由于他是绝对定位,可以将他的位置设置为里屏幕很远,如:left:-9999px;在鼠标移入时,将其设置到正确位置。

这样基本就完成了一个二级导航。在此基础上可以毫不费力地做出三级导航,四级导航...N级导航.....不过超过三级导航就没必要了。

为了使之使用起来更加友好,可以对其加些功能,比如当鼠标移入一级导航时,不仅弹出对应的二级导航,还会改变这个一级导航的样式,使其更加显眼,这个用伪类hover就可以轻松完成。再如:在导航条中突出显示当前页面对应的选项以提醒用户知道自己的位置(比如用户在首页,则导航条的首页选项的样式会和其他选项不同),这样用户看看导航条就会知道自己身处何处,这可以在页面中手动改变;以home页面为例,在home.html中,将对应home的li的类名增加this类(<li class="home this"><a href="index.html">HOME</a></li>),而this类名对应的样式是与众不同的(如.this{border-bottom: 2px solid #b0b;}),只需要在CSS文件中增加this类的样式,需要改变样式时直接给HTML标签增加类名就可以了;然而这种方法有违背结构与样式分离原则的嫌疑,而且操作起来有些繁琐,不过在利用纯CSS达到这个目的的情况下这样也可以。

最终效果为:


源码如下:

HTML:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>nav</title>  
  5. <link rel="stylesheet" type="text/css" href="style/common.css">  
  6. </head>  
  7. <body>  
  8. <div id="nav-wrap">  
  9. <ul id="nav"><!--一级导航的ul-->  
  10.     <li class="home this"><a href="index.html"><i></i><span>HOME</span></a></li>  
  11.   
  12.     <li class="safe"><a href="safe.html"><i></i><span>SAFETY</span></a><!--一级导航的li-->  
  13.         <ul><!--一级菜单的li中的二级导航的ul-->  
  14.             <li><a href="http://cn.bing.com"><span>After Effects</span></a></li><!--二级导航中各个选项li-->  
  15.             <li><a href="#"><span>Open-Source Apps</span></a></li>  
  16.             <li><a href="#"><span>Android</span></a></li>  
  17.             <li><a href="#"><span>JavaScript</span></a></li>  
  18.         </ul>  
  19.     </li>  
  20.   
  21.     <li class="service"><a href="#"><i></i><span>SERVICE</span></a>  
  22.         <ul>  
  23.             <li><a href="#"><span>After Effects</span></a></li>  
  24.             <li><a href="#"><span>Open-Source Apps</span></a></li>  
  25.             <li><a href="#"><span>Android</span></a></li>  
  26.             <li><a href="#"><span>JavaScript</span></a></li>  
  27.         </ul>  
  28.     </li>  
  29.     <li class="shoping-car"><a href="#"><i></i><span>SHOPING CAR</span></a>  
  30.         <ul>  
  31.             <li><a href="#"><span>After Effects</span></a></li>  
  32.             <li><a href="#"><span>Open-Source Apps</span></a></li>  
  33.             <li><a href="#"><span>Android</span></a></li>  
  34.             <li><a href="#"><span>JavaScript</span></a></li>  
  35.         </ul>  
  36.     </li>  
  37.     <li class="member"><a href="#"><i></i><span>MEMBER</span></a>  
  38.         <ul>  
  39.             <li><a href="#"><span>After Effects</span></a></li>  
  40.             <li><a href="#"><span>Open-Source Apps</span></a></li>  
  41.             <li><a href="#"><span>Android</span></a></li>  
  42.             <li><a href="#"><span>See More...</span></a></li>  
  43.         </ul>  
  44.     </li>  
  45. </ul>  
  46. </div>  
  47. </body>  
  48. </html>  
CSS:
  1. body,ul,li,a{margin0;padding0}  
  2. body{background-color#e6e7e9;}  
  3. #nav-wrap{margin100px auto;width100%;background-colorwhite;border-bottom2px solid #ddd;}  
  4. ul{list-stylenone;}  
  5. #nav{width750pxheight45px;margin:0 auto;}  
  6. #nav>li{floatleft;positionrelative;height45px;margin-right60px;}  
  7. a{displayblocktext-decorationnone;font-family"Roboto""Helvetica Neue"HelveticaArialsans-serif;font-size12px;}  
  8. #nav>li>a{color#000;text-transform:uppercase;height13pxline-height13pxpadding17px 0 15px 0px;font-size12px;text-aligncenter;}  
  9. #nav>li i{display: inline-blockheight12pxwidth:12pxmargin-right8px;backgroundurl(../images/home.png) left bottom no-repeat;}  
  10. #nav>li ul{positionabsolute;left: -40px;top: 47pxwidth180px;background-color#fff;padding20px;displaynone;  
  11.     border:1px solid #ECEFF5;}  
  12. #nav>li ul li{margin-bottom10px;}  
  13. #nav>li ul a{font-size13px;color#606060;}  
  14. .this{border-bottom2px solid #b0b;}  
  15. #nav>li:hover ul{display:block;}  
  16. #nav>li:hover{border-bottom2px solid #0bb;}  


算法 - 《算法导论 第2版》(前三部分)(转自http://blog.csdn.net/yourtommy/article/details/6749238)

第一部分 基础知识 第1章 算法在计算中的作用 算法的定义:算法就是一系列的计算步骤,用来将输入数据转换成输出结果。 算法可以解决哪些类型的问题? 1、生物问题,如DNA基因序列的分析; 2...
  • xjbzju
  • xjbzju
  • 2011年09月22日 21:31
  • 2879

Linux shell脚本编写基础 转自:http://blog.csdn.net/fpmystar/article/details/4183678

转自:http://blog.csdn.net/fpmystar/article/details/4183678 在进行linux测试时编写脚本是必不可少的,Shell脚本的名称可以随便定义...
  • jubincn
  • jubincn
  • 2012年02月16日 14:10
  • 869

转自:http://blog.csdn.net/szwangdf/article/details/6158646 定时任务之-Quartz使用篇

原文:http://blog.csdn.net/szwangdf/article/details/6158646      定时任务之-Quartz使用篇           Quartz是...

Spring+Hibernate双数据源测试Mysql集群读写分离(转自http://blog.csdn.net/hzw2312/article/details/9083519)

进行测试!环境就是SH框架、当然这只是一个简单的测试! 准备环境就是Spring框架跟Hibernate框架的整合! 然后在Spring配置文件中配置两个数据源、这里我采用的是从c3po数...

轮播图片转自http://blog.csdn.net/diligentkong/article/details/55209861

转自http://blog.csdn.net/diligentkong/article/details/55209861   js实现轮播图原理及示例 标签: javascrip...

SQLite数据库的挂接及常用命令(转自:http://blog.csdn.net/windone0109/article/details/5514948)

安装: 官方网站下载最新的sqlite版本 官方网站: http://www.sqlite.org/ 下载地址为: http://www.sqlite.org/download.ht...
  • lslxdx
  • lslxdx
  • 2011年11月06日 15:08
  • 753

Delphi 完全时尚手册之 Visual Style 篇 (界面不错) 转自http://blog.csdn.net/iseekcode/article/details/4733229

====================================================== 注:本文源代码点此下载 =============================...

SQL 中的 图 树 层次结构[转自http://blog.csdn.net/feixianxxx/article/details/4753783]

在RDBMS中操作 图 树 层次结构 等特殊的数据结构时,我们通常采用2个主要方法: 1.基于迭代/递归 2.具体化描述数据结构的附加信息。 一般模型有:员工组织图(树,层次结构);料表--...

140个Google面试问题(转自http://blog.csdn.net/bopgroup/article/details/6514423)

原文地址:http://www.cnblogs.com/hanyulcf/archive/2010/12/03/1895934.html 某猎头收集了140多个Google的面试题,都张到他的Blo...
  • xjbzju
  • xjbzju
  • 2011年10月10日 10:23
  • 834

android 服务的应用,在Activity中实现背景音乐播放(转自http://blog.csdn.net/imyang2007/article/details/7597040,仅供个人学习)

android 服务的应用,在Activity中实现背景音乐播放(转自http://blog.csdn.net/imyang2007/article/details/7597040,仅供个人学习) ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:多级导航,转自http://blog.csdn.net/rabbitter/article/details/51125337
举报原因:
原因补充:

(最多只允许输入30个字)