设为首页收藏本站
开启辅助访问 切换到宽版

源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
搜索
返回列表 发新帖回复
楼主: ttx9n

[CSS] 纯CSS实现兼容IE7及以上宽度自适应无限级导航菜单附演示

[复制链接]
ttx9n

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2013-10-18 12:13:53 | 显示全部楼层 |阅读模式
IE7的兼容并不是特别好，当鼠标离开某个导航再进入时，会留下上一次子菜单的残影，宽度自适应是指各级菜单都可以随内容的长度自行适应宽度，附演示，感兴趣的朋友可以参考下 先来个Demo：
https://www.jb51.net/jiaoben/111258.html
好吧，我承认，我有点标题党了，IE7的兼容并不是特别好，当鼠标离开某个导航再进入时，会留下上一次子菜单的残影（写的好像玄幻小说似的=。=）

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

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

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

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

复制代码代码如下:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>无限级纯CSS导航菜单</title>
<style type="text/css">
.nav{
margin: 0;
padding: 0;
float: left;
list-style: none;
background: #222;
}
.nav a{
color: #ddd;
display: block;
padding: 0 15px;
text-decoration: none;
}
.nav a:hover{
color: #2FAADD;
}
.nav .item{
margin: 0;
padding: 0;
float: left;
height: 35px;
line-height: 35px;
white-space: nowrap;
}
.nav .item:hover>a{
color: #2FAADD;
}
.nav .item:hover>.nav{
display: block;
}
.nav .nav{
top: 100%;
left: 0;
display: none;
background: #444;
position: absolute;
border: 1px solid #888;
}
.nav .nav .item{
clear: both;
min-width: 100%;
}
.nav .nav .nav{
top: -1px;
left: 100%;
}
.nav .nav .nav .nav .nav .nav{
left: auto;
right: 100%;
}
</style>
</head>
<body>
<ul class="nav">
<li class="item"><a href="#">一级导航 1</a>
<ul class="nav">
<li class="item"><a href="#">二级导航 1</a>
<ul class="nav">
<li class="item"><a href="#">三级导航 1</a></li>
<li class="item"><a href="#">三级导航 2</a></li>
<li class="item"><a href="#">三级导航 3</a></li>
<li class="item"><a href="#">三级导航 4</a></li>
<li class="item"><a href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a href="#">二级导航 2</a>
<ul class="nav">
<li class="item"><a href="#">三级导航 1</a></li>
<li class="item"><a href="#">三级导航 2</a></li>
<li class="item"><a href="#">三级导航 3</a></li>
<li class="item"><a href="#">三级导航 4</a></li>
<li class="item"><a href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a href="#">无子导航 3</a></li>
<li class="item"><a href="#">二级导航 4</a>
<ul class="nav">
<li class="item"><a href="#">三级导航 1</a></li>
<li class="item"><a href="#">三级导航 2</a></li>
<li class="item"><a href="#">三级导航 3</a></li>
<li class="item"><a href="#">三级导航 4</a></li>
<li class="item"><a href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a href="#">无子导航 5</a></li>
</ul>
</li>
<li class="item"><a href="#">长长的一级导航 2</a>
<ul class="nav">
<li class="item"><a href="#">二级导航 1</a>
<ul class="nav">
<li class="item"><a href="#">三级导航 1</a></li>
<li class="item"><a href="#">三级导航 2</a></li>
<li class="item"><a href="#">三级导航 3</a></li>
<li class="item"><a href="#">三级导航 4</a></li>
<li class="item"><a href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a href="#">二级导航 2</a>
<ul class="nav">
<li class="item"><a href="#">三级导航 1</a></li>
<li class="item"><a href="#">三级导航 2</a></li>
<li class="item"><a href="#">三级导航 3</a></li>
<li class="item"><a href="#">三级导航 4</a></li>
<li class="item"><a href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a href="#">更长的二级导航 3</a>
<ul class="nav">
<li class="item"><a href="#">三级导航 1</a></li>
<li class="item"><a href="#">三级导航 2</a></li>
<li class="item"><a href="#">三级导航 3</a></li>
<li class="item"><a href="#">三级导航 4</a></li>
<li class="item"><a href="#">低调的三级导航 5</a>
<ul class="nav">
<li class="item"><a href="#">四级导航 1</a></li>
<li class="item"><a href="#">藏的很深的四级导航 2</a>
<ul class="nav">
<li class="item"><a href="#">藏的更深的五级导航 0</a></li>
<li class="item"><a href="#">五级导航 1</a></li>
<li class="item"><a href="#">五级导航 2</a></li>
<li class="item"><a href="#">五级导航 3</a></li>
<li class="item"><a href="#">五级导航 4</a></li>
<li class="item"><a href="#">下面该往左了吧</a>
<ul class="nav">
<li class="item"><a href="#">我在左边</a></li>
<li class="item"><a href="#">我真的在左边</a></li>
<li class="item"><a href="#">我就要赖在左边</a></li>
<li class="item"><a href="#">杨丞琳的左边好听</a></li>
<li class="item"><a href="#">呜呜，今年双十一又要过节</a></li>
<li class="item"><a href="#">妹纸妹纸在哪里？</a></li>
</ul>
</li>
</ul>
</li>
<li class="item"><a href="#">四级导航 3</a></li>
<li class="item"><a href="#">四级导航 4</a></li>
<li class="item"><a href="#">四级导航 5</a></li>
</ul>
</li>
</ul>
</li>
<li class="item"><a href="#">二级导航 4</a>
<ul class="nav">
<li class="item"><a href="#">三级导航 1</a></li>
<li class="item"><a href="#">三级导航 2</a></li>
<li class="item"><a href="#">三级导航 3</a></li>
<li class="item"><a href="#">三级导航 4</a></li>
<li class="item"><a href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a href="#">二级导航 5</a>
<ul class="nav">
<li class="item"><a href="#">三级导航 1</a></li>
<li class="item"><a href="#">三级导航 2</a></li>
<li class="item"><a href="#">三级导航 3</a></li>
<li class="item"><a href="#">三级导航 4</a></li>
<li class="item"><a href="#">三级导航 5</a></li>
</ul>
</li>
</ul>
</li>
<li class="item"><a href="#">无子导航 3</a></li>
<li class="item"><a href="#">一级导航 4</a>
<ul class="nav">
<li class="item"><a href="#">二级导航 1</a>
<ul class="nav">
<li class="item"><a href="#">三级导航 1</a></li>
<li class="item"><a href="#">三级导航 2</a></li>
<li class="item"><a href="#">三级导航 3</a></li>
<li class="item"><a href="#">三级导航 4</a></li>
<li class="item"><a href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a href="#">二级导航 2</a>
<ul class="nav">
<li class="item"><a href="#">三级导航 1</a></li>
<li class="item"><a href="#">三级导航 2</a></li>
<li class="item"><a href="#">三级导航 3</a></li>
<li class="item"><a href="#">三级导航 4</a></li>
<li class="item"><a href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a href="#">二级导航 3</a>
<ul class="nav">
<li class="item"><a href="#">三级导航 1</a></li>
<li class="item"><a href="#">三级导航 2</a></li>
<li class="item"><a href="#">三级导航 3</a></li>
<li class="item"><a href="#">三级导航 4</a></li>
<li class="item"><a href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a href="#">二级导航 4</a>
<ul class="nav">
<li class="item"><a href="#">三级导航 1</a></li>
<li class="item"><a href="#">三级导航 2</a></li>
<li class="item"><a href="#">三级导航 3</a></li>
<li class="item"><a href="#">三级导航 4</a></li>
<li class="item"><a href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a href="#">二级导航 5</a>
<ul class="nav">
<li class="item"><a href="#">三级导航 1</a></li>
<li class="item"><a href="#">三级导航 2</a></li>
<li class="item"><a href="#">三级导航 3</a></li>
<li class="item"><a href="#">三级导航 4</a></li>
<li class="item"><a href="#">三级导航 5</a></li>
</ul>
</li>
</ul>
</li>
<li class="item"><a href="#">一级导航 5</a>
<ul class="nav">
<li class="item"><a href="#">无子导航 1</a></li>
<li class="item"><a href="#">无子导航 2</a></li>
<li class="item"><a href="#">无子导航 3</a></li>
<li class="item"><a href="#">无子导航 4</a></li>
<li class="item"><a href="#">无子导航 5</a></li>
</ul>
</li>
</ul>
</body>
</html>

不过如果要探讨实用性的话，还是需要用JavaScript来兼容IE6下li不支持hover伪类的BUG，改动也很简单，也来个Demo：
https://www.jb51.net/jiaoben/111260.html
纯CSS, 宽度自适应, 无限级, 导航菜单

相关帖子
回复

使用道具 举报

i3x3r3

12

主题

2万

回帖

431

积分

中级会员

Rank: 3Rank: 3

积分
431
发表于 2022-9-10 12:26:29 | 显示全部楼层
哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

adm1n

1

主题

2万

回帖

182

积分

注册会员

Rank: 2

积分
182
发表于 2023-4-21 23:59:28 | 显示全部楼层
还有什么好东西没
回复 支持 反对

使用道具 举报

u7yxn9

1

主题

2万

回帖

321

积分

中级会员

Rank: 3Rank: 3

积分
321
发表于 2023-5-20 23:05:11 | 显示全部楼层
老衲笑纳了
回复 支持 反对

使用道具 举报

pwseqn1h

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-15 23:54:43 | 显示全部楼层
哦哦哦哦哦哦哦哦哦
回复 支持 反对

使用道具 举报

5ble0ks

1

主题

2万

回帖

176

积分

注册会员

Rank: 2

积分
176
发表于 2023-10-16 11:14:36 | 显示全部楼层
vcxvcxv
回复 支持 反对

使用道具 举报

u7yxn9

1

主题

2万

回帖

321

积分

中级会员

Rank: 3Rank: 3

积分
321
发表于 2023-10-21 01:12:10 | 显示全部楼层
这个源码还可以
回复 支持 反对

使用道具 举报

btbhs8t

6

主题

2万

回帖

425

积分

中级会员

Rank: 3Rank: 3

积分
425
发表于 2023-12-11 01:21:31 | 显示全部楼层
谢谢下载来看看
回复 支持 反对

使用道具 举报

xf9hlg1

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-4-2 04:31:17 | 显示全部楼层
哟哟哟哟哟以偶
回复 支持 反对

使用道具 举报

95nd4ba

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-4-15 10:18:52 | 显示全部楼层
了乐趣了去了去了去了去了
回复 支持 反对

使用道具 举报

返回列表 发新帖 回复
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 11:52 , Processed in 0.106470 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表