[纯耍帅] 纯CSS、兼容IE7+、宽度自适应、无限级导航菜单

于 2013-10-16 22:45:39 发布
阅读量887 收藏
点赞数 1
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CooLanfei/article/details/12798613
版权

先来个Demo：


http://www.clanfei.com/demos/nav/nav.html


好吧，我承认，我有点标题党了，IE7的兼容并不是特别好，当鼠标离开某个导航再进入时，会留下上一次子菜单的残影（写的好像玄幻小说似的=。=）


不过纯属研究，O(∩_∩)O哈哈~


宽度自适应是指各级菜单都可以随内容的长度自行适应宽度，而当浏览器分辨率较低时一级导航也可以自动换行，而多级子菜单靠左显示还是得手动调整。


DOM结构比较简单，只是 ol.nav 与 li.item 的互相嵌套而已。


看代码吧（长是长了点，但其实你会发现导航的标签结构真的真的很简单，重要的是CSS部分）：


 
 
  1. <!doctype html>

  2. <html lang="zh-CN">

  3. <head>

  4.         <meta charset="UTF-8">

  5.         <title>无限级纯CSS导航菜单</title>

  6.         <style type="text/css">

  7.         .nav{

  8.                 margin: 0;

  9.                 padding: 0;

  10.                 float: left;

  11.                 list-style: none;

  12.                 background: #222;

  13.         }

  14.         .nav a{

  15.                 color: #ddd;

  16.                 display: block;

  17.                 padding: 0 15px;

  18.                 text-decoration: none;

  19.         }

  20.         .nav a:hover{

  21.                 color: #2FAADD;

  22.         }

  23.         .nav .item{

  24.                 margin: 0;

  25.                 padding: 0;

  26.                 float: left;

  27.                 height: 35px;

  28.                 line-height: 35px;

  29.                 white-space: nowrap;

  30.         }

  31.         .nav .item:hover>a{

  32.                 color: #2FAADD;

  33.         }

  34.         .nav .item:hover>.nav{

  35.                 display: block;

  36.         }

  37.         .nav .nav{

  38.                 top: 100%;

  39.                 left: 0;

  40.                 display: none;

  41.                 background: #444;

  42.                 position: absolute;

  43.                 border: 1px solid #888;

  44.         }

  45.         .nav .nav .item{

  46.                 clear: both;

  47.                 min-width: 100%;

  48.         }

  49.         .nav .nav .nav{

  50.                 top: -1px;

  51.                 left: 100%;

  52.         }

  53.         .nav .nav .nav .nav .nav .nav{

  54.                 left: auto;

  55.                 right: 100%;

  56.         }

  57.         </style>

  58. </head>

  59. <body>

  60.         <ul class="nav">

  61.                 <li class="item"><a href="#">一级导航 1</a>

  62.                         <ul class="nav">

  63.                                 <li class="item"><a href="#">二级导航 1</a>

  64.                                         <ul class="nav">

  65.                                                 <li class="item"><a href="#">三级导航 1</a></li>

  66.                                                 <li class="item"><a href="#">三级导航 2</a></li>

  67.                                                 <li class="item"><a href="#">三级导航 3</a></li>

  68.                                                 <li class="item"><a href="#">三级导航 4</a></li>

  69.                                                 <li class="item"><a href="#">三级导航 5</a></li>

  70.                                         </ul>

  71.                                 </li>

  72.                                 <li class="item"><a href="#">二级导航 2</a>

  73.                                         <ul class="nav">

  74.                                                 <li class="item"><a href="#">三级导航 1</a></li>

  75.                                                 <li class="item"><a href="#">三级导航 2</a></li>

  76.                                                 <li class="item"><a href="#">三级导航 3</a></li>

  77.                                                 <li class="item"><a href="#">三级导航 4</a></li>

  78.                                                 <li class="item"><a href="#">三级导航 5</a></li>

  79.                                         </ul>

  80.                                 </li>

  81.                                 <li class="item"><a href="#">无子导航 3</a></li>

  82.                                 <li class="item"><a href="#">二级导航 4</a>

  83.                                         <ul class="nav">

  84.                                                 <li class="item"><a href="#">三级导航 1</a></li>

  85.                                                 <li class="item"><a href="#">三级导航 2</a></li>

  86.                                                 <li class="item"><a href="#">三级导航 3</a></li>

  87.                                                 <li class="item"><a href="#">三级导航 4</a></li>

  88.                                                 <li class="item"><a href="#">三级导航 5</a></li>

  89.                                         </ul>

  90.                                 </li>

  91.                                 <li class="item"><a href="#">无子导航 5</a></li>

  92.                         </ul>

  93.                 </li>

  94.                 <li class="item"><a href="#">长长的一级导航 2</a>

  95.                         <ul class="nav">

  96.                                 <li class="item"><a href="#">二级导航 1</a>

  97.                                         <ul class="nav">

  98.                                                 <li class="item"><a href="#">三级导航 1</a></li>

  99.                                                 <li class="item"><a href="#">三级导航 2</a></li>

  100.                                                 <li class="item"><a href="#">三级导航 3</a></li>

  101.                                                 <li class="item"><a href="#">三级导航 4</a></li>

  102.                                                 <li class="item"><a href="#">三级导航 5</a></li>

  103.                                         </ul>

  104.                                 </li>

  105.                                 <li class="item"><a href="#">二级导航 2</a>

  106.                                         <ul class="nav">

  107.                                                 <li class="item"><a href="#">三级导航 1</a></li>

  108.                                                 <li class="item"><a href="#">三级导航 2</a></li>

  109.                                                 <li class="item"><a href="#">三级导航 3</a></li>

  110.                                                 <li class="item"><a href="#">三级导航 4</a></li>

  111.                                                 <li class="item"><a href="#">三级导航 5</a></li>

  112.                                         </ul>

  113.                                 </li>

  114.                                 <li class="item"><a href="#">更长的二级导航 3</a>

  115.                                         <ul class="nav">

  116.                                                 <li class="item"><a href="#">三级导航 1</a></li>

  117.                                                 <li class="item"><a href="#">三级导航 2</a></li>

  118.                                                 <li class="item"><a href="#">三级导航 3</a></li>

  119.                                                 <li class="item"><a href="#">三级导航 4</a></li>

  120.                                                 <li class="item"><a href="#">低调的三级导航 5</a>

  121.                                                         <ul class="nav">

  122.                                                                 <li class="item"><a href="#">四级导航 1</a></li>

  123.                                                                 <li class="item"><a href="#">藏的很深的四级导航 2</a>

  124.                                                                         <ul class="nav">

  125.                                                                                 <li class="item"><a href="#">藏的更深的五级导航 0</a></li>

  126.                                                                                 <li class="item"><a href="#">五级导航 1</a></li>

  127.                                                                                 <li class="item"><a href="#">五级导航 2</a></li>

  128.                                                                                 <li class="item"><a href="#">五级导航 3</a></li>

  129.                                                                                 <li class="item"><a href="#">五级导航 4</a></li>

  130.                                                                                 <li class="item"><a href="#">下面该往左了吧</a>

  131.                                                                                         <ul class="nav">

  132.                                                                                                 <li class="item"><a href="#">我在左边</a></li>

  133.                                                                                                 <li class="item"><a href="#">我真的在左边</a></li>

  134.                                                                                                 <li class="item"><a href="#">我就要赖在左边</a></li>

  135.                                                                                                 <li class="item"><a href="#">杨丞琳的左边好听</a></li>

  136.                                                                                                 <li class="item"><a href="#">呜呜，今年双十一又要过节</a></li>

  137.                                                                                                 <li class="item"><a href="#">妹纸妹纸在哪里？</a></li>

  138.                                                                                         </ul>

  139.                                                                                 </li>

  140.                                                                         </ul>

  141.                                                                 </li>

  142.                                                                 <li class="item"><a href="#">四级导航 3</a></li>

  143.                                                                 <li class="item"><a href="#">四级导航 4</a></li>

  144.                                                                 <li class="item"><a href="#">四级导航 5</a></li>

  145.                                                         </ul>

  146.                                                 </li>

  147.                                         </ul>

  148.                                 </li>

  149.                                 <li class="item"><a href="#">二级导航 4</a>

  150.                                         <ul class="nav">

  151.                                                 <li class="item"><a href="#">三级导航 1</a></li>

  152.                                                 <li class="item"><a href="#">三级导航 2</a></li>

  153.                                                 <li class="item"><a href="#">三级导航 3</a></li>

  154.                                                 <li class="item"><a href="#">三级导航 4</a></li>

  155.                                                 <li class="item"><a href="#">三级导航 5</a></li>

  156.                                         </ul>

  157.                                 </li>

  158.                                 <li class="item"><a href="#">二级导航 5</a>

  159.                                         <ul class="nav">

  160.                                                 <li class="item"><a href="#">三级导航 1</a></li>

  161.                                                 <li class="item"><a href="#">三级导航 2</a></li>

  162.                                                 <li class="item"><a href="#">三级导航 3</a></li>

  163.                                                 <li class="item"><a href="#">三级导航 4</a></li>

  164.                                                 <li class="item"><a href="#">三级导航 5</a></li>

  165.                                         </ul>

  166.                                 </li>

  167.                         </ul>

  168.                 </li>

  169.                 <li class="item"><a href="#">无子导航 3</a></li>

  170.                 <li class="item"><a href="#">一级导航 4</a>

  171.                         <ul class="nav">

  172.                                 <li class="item"><a href="#">二级导航 1</a>

  173.                                         <ul class="nav">

  174.                                                 <li class="item"><a href="#">三级导航 1</a></li>

  175.                                                 <li class="item"><a href="#">三级导航 2</a></li>

  176.                                                 <li class="item"><a href="#">三级导航 3</a></li>

  177.                                                 <li class="item"><a href="#">三级导航 4</a></li>

  178.                                                 <li class="item"><a href="#">三级导航 5</a></li>

  179.                                         </ul>

  180.                                 </li>

  181.                                 <li class="item"><a href="#">二级导航 2</a>

  182.                                         <ul class="nav">

  183.                                                 <li class="item"><a href="#">三级导航 1</a></li>

  184.                                                 <li class="item"><a href="#">三级导航 2</a></li>

  185.                                                 <li class="item"><a href="#">三级导航 3</a></li>

  186.                                                 <li class="item"><a href="#">三级导航 4</a></li>

  187.                                                 <li class="item"><a href="#">三级导航 5</a></li>

  188.                                         </ul>

  189.                                 </li>

  190.                                 <li class="item"><a href="#">二级导航 3</a>

  191.                                         <ul class="nav">

  192.                                                 <li class="item"><a href="#">三级导航 1</a></li>

  193.                                                 <li class="item"><a href="#">三级导航 2</a></li>

  194.                                                 <li class="item"><a href="#">三级导航 3</a></li>

  195.                                                 <li class="item"><a href="#">三级导航 4</a></li>

  196.                                                 <li class="item"><a href="#">三级导航 5</a></li>

  197.                                         </ul>

  198.                                 </li>

  199.                                 <li class="item"><a href="#">二级导航 4</a>

  200.                                         <ul class="nav">

  201.                                                 <li class="item"><a href="#">三级导航 1</a></li>

  202.                                                 <li class="item"><a href="#">三级导航 2</a></li>

  203.                                                 <li class="item"><a href="#">三级导航 3</a></li>

  204.                                                 <li class="item"><a href="#">三级导航 4</a></li>

  205.                                                 <li class="item"><a href="#">三级导航 5</a></li>

  206.                                         </ul>

  207.                                 </li>

  208.                                 <li class="item"><a href="#">二级导航 5</a>

  209.                                         <ul class="nav">

  210.                                                 <li class="item"><a href="#">三级导航 1</a></li>

  211.                                                 <li class="item"><a href="#">三级导航 2</a></li>

  212.                                                 <li class="item"><a href="#">三级导航 3</a></li>

  213.                                                 <li class="item"><a href="#">三级导航 4</a></li>

  214.                                                 <li class="item"><a href="#">三级导航 5</a></li>

  215.                                         </ul>

  216.                                 </li>

  217.                         </ul>

  218.                 </li>

  219.                 <li class="item"><a href="#">一级导航 5</a>

  220.                         <ul class="nav">

  221.                                 <li class="item"><a href="#">无子导航 1</a></li>

  222.                                 <li class="item"><a href="#">无子导航 2</a></li>

  223.                                 <li class="item"><a href="#">无子导航 3</a></li>

  224.                                 <li class="item"><a href="#">无子导航 4</a></li>

  225.                                 <li class="item"><a href="#">无子导航 5</a></li>

  226.                         </ul>

  227.                 </li>

  228.         </ul>

  229. </body>

  230. </html>


不过如果要探讨实用性的话，还是需要用JavaScript来兼容IE6下li不支持hover伪类的BUG，改动也很简单，也来个Demo：

http://www.clanfei.com/demos/nav/nav-js.html



=======================签 名 档=======================
原文地址（我的博客）：http://www.clanfei.com/2013/10/1727.html
欢迎访问交流，至于我为什么要多弄一个博客，因为我热爱前端，热爱网页，我更希望有一个更加自由、真正属于我自己的小站，或许并不是那么有名气，但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================


蓝飞
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS实现兼容IE7及以上宽度自适应无限级导航菜单附演示
09-25
【纯CSS实现兼容IE7及以上宽度自适应无限级导航菜单】是一种常见的网页设计技术，它旨在创建一个在不同浏览器和屏幕尺寸下都能良好显示的多级导航系统，尤其考虑到老版本如IE7的兼容性问题。这个技术的核心是利用CSS...
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
10-30
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容 本文将详细介绍如何使用纯CSS创建一个纵向下拉菜单，同时兼容IE6和IE7浏览器。 一、网页布局 在开始之前，我们需要了解基本的网页布局结构。一个标准的网页布局结构通常...
CSS自适应导航菜单的实例代码
09-24
本文将深入讲解如何使用纯CSS实现一个自适应的导航菜单，并提供一个实例代码。 首先，我们来看HTML结构。一个基本的导航菜单通常包含一个`<nav>`元素，里面嵌套一个无序列表`<ul>`，列表项`<li>`表示菜单的各个选项...
无限级CSS+JQ导航菜单兼容包括IE6在内的主流浏览器
06-12
如果不打算兼容ie6，那么把jq删除后，就是纯css写的无限级横向下拉导航菜单，经测试，暂未发现不兼容的浏览器。目前演示页已经添加到十一级导航！还可添加更多，代码非常简单，就是一直嵌套，样式也非常少，简单明了...
借@阿里巴巴 耍了个帅——HTML5 JavaScript实现图片文字识别与提取
热门推荐
09-16 1万+
8月底的时候，@阿里巴巴 推出了一款名为“拯救斯诺克”的闯关游戏，作为前端校园招聘的热身，做的相当不错，让我非常喜欢。后来又传出了一条消息，阿里推出了A-star（阿里星）计划，入职阿里的技术培训生，将接受CTO等技术大牛的封闭培训，并被安排到最有挑战的项目中，由技术带头人担任主管。于是那几天关注了一下阿里巴巴的消息，结果看到这么一条微博...
新浪微博表情jQuery插件 v1.2——方便地实现表情插入功能
08-22 3716
开发缘由 自从新浪微博开放平台推出以来，各种微博应用层出不穷，作为新浪微博的忠实用户之一，我也曾开发过几个微博应用，对于微博发布应用来说，有一个功能是必不可少的，那就是表情。表情功能的实现虽说不难，但却比较繁琐，首先要了解新浪微博开放平台的表情API，然后通过某种方式调用，如果通过网页后台代码直接读取储存到JavaScript变量中，又会拖慢网页加载速度，如果采用AJAX读取，又要解决跨域问题，
丰富网页摘要——HTML5中的“微数据”(MicroData)
08-19 2182
什么是“微数据” 大多数网络管理员都熟悉网页上的HTML标签，通常情况下，HTML标记告诉浏览器如何显示在标签中包含的信息。 例如， 阿凡达告诉浏览器显示的文本字符串“阿凡达”在标题1格式。然而，HTML标记不提供任何有关文本字符串意味着什么，“阿凡达”可能是指取得巨大成功的3D电影的信息，或者它可以指一张纸娃娃系统的图片，这使得搜索引擎难以智能地理解网页中的具体内容。 微数据的作
操纵历史，利用HTML5 History API实现无刷新跳转
09-05 2135
写在前面 有一次在上点点网的时候，发现登陆、注册动画效果非常华丽，但让我感到震惊的是页面竟能够实现无刷新跳转（已改版，观看此效果可以猛击此处：GitHub或阅FM），回顾了所学的前端知识，似乎没有任何技术可以实现这一点，于是百度搜罗了一下，才发现这原来是使用HTML5中History API实现的效果，但奈何一直未曾派上用场。直到我的博客改版时，才将这一技术应用起来。
CSS3无图片实现华丽折页菜单效果（多浏览器兼容）
05-29 1949
昨天在做一个网站的左栏菜单的时候，突然想到，看了那么多创意的CSS3导航、菜单，何不自己动手做一个纯CSS3菜单呢？于是捣鼓了一下把想法给实现了，虽然说是比较老掉牙的一个创意，不过顺便也算是锻炼了一下CSS水平。 先看看网页里的最终效果： 那么，教程开始了！ Step1 首先，一个菜单的结构如下： 菜单1 菜单2 菜单3 菜单4
Highcharts: 非常漂亮的免费纯JavaScript图表库
02-02 1539
Highcharts是什么？ Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。 HighCharts界面美观，由于使用JavaScript编
纯CSS无表达式实现图片等比缩放（支持IE7及以上）
02-28 1391
在制作网页的时候，常常会遇到一种情况，我们需要把一些未知尺寸的图片放在一个固定宽高的容器中，这时候我们需要考虑这样的问题： 只给图片设置宽度或高度的其中一项可以实现图片等比缩放，但图片可能超出容器大小。给图片设置固定的宽高可能导致图片变形。 有些人可能会简单地用JavaScript解决：  src="image-url.png" onload="if(this.width > 100
利用JSONP解决AJAX跨域问题的原理与jQuery解决方案
08-10 1377
写在前面 跨域的解决方案有多种，其中最常见的是使用同一服务器下的代理来获取远端数据，再通过ajax进行读取，而在这期间经过了两次请求过程，使得获取数据的效率大大降低，这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP。 什么是跨域？ 简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就
WordPress速度优化之缓存Gravatar头像（SAE版1.2）
04-07 1351
什么是Gravatar？ Gravatar是Globally Recognized Avatar的缩写,是gravatar推出的一项服务，意为“全球通用头像”。如果在Gravatar的服务器上放置了你自己的头像，那么在任何支持Gravatar的blog或者留言本上留言时，只要提供你与这个头像关联的email地址，就能够显示出你的Gravatar头像来。 如何申请Grav
[前端设计]一枚小菜的博客前端大规模改版小记与总结
08-03 1321
2012年7月29日中午，在SAE中看到博客应用性能等级为“D”，作为完美主义者兼强迫症的我受到极大刺激，自诩前端开发发烧友的我，个人博客使用的竟然还是别人设计的主题，虽然曾稍作优化，但仍是觉得代码臃肿却平凡单调，再想想我至今甚至未有多少自己较为满意的前端作品（详见 我的作品整理），于是立马开始了新主题的设计。 原本的博客主题： 由于刚刚安装了Visual Studio
CSS3实现文本框焦点伸长效果
05-29 1229
如果用过苹果官网的搜索功能，就会发现，当搜索框获得焦点时会自动伸长，并且有动画效果，这是怎么实现的呢？不需要Flash，不需要JavaScript，纯CSS3就可以实现，先看看Demo（不支持IE内核浏览器）： 演示地址 CSS代码： input, textarea{ color: #888; padding: 5px; margin: 10px; out
【Web前端】HTML文档与盒子模型
10-15 1214
关于HTML 百度百科里是这么说的：超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。 为什么叫用于“描述”网页文档的“标记”语言呢？ 简单地说，它不像Java，C++等程式语言，而是通过标记（也称标签）来表示一个网页的结构与内容，它的语法非常简单，只是由各种不同的标记组合而成，因此这类语言的学习方式主要靠积累，而
[小技巧]兼容IE6的纯CSS背景半透明文字不透明
08-03 1207
html>  lang="en">                           charset="UTF-8">                                          IE背景半透明                                   type="text/css">                
方便、简洁：Flash AS3实现多浏览器兼容复制按钮
05-07 1180
众所周知，在网页中若想实现点击按钮自动复制到剪贴板中可以用以下代码实现： if(window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData("text", "这是复制的文字"); } 但可惜的是，这种方式只支持IE内核浏览器。 而对
[前端]浅析外边距折叠（Collapsing Margins）
01-26 1050
我们在学习前端的过程中，有时候会出现一些奇怪的现象，Collapsing Margins便是其中之一，有时候我们想要某个元素离的第一个子元素能够下移一些，于是给它设置了margin-top，但奇怪的是这个margin-top属性却传递给了父元素，导致父元素的位置下移： HTML>  lang="en-US">          charset="UTF-8">
html二级菜单的自动宽度,HTML+CSS导航栏自适应
最新发布
05-25
要实现 HTML+CSS 导航栏自适应，可以使用 flex 布局，并设置菜单项的 flex-grow 属性为 1，同时设置菜单容器的 justify-content 为 space-between 或者 space-around。这样菜单项就会自动平分容器宽度，实现自适应...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值