杰拉斯的博客

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

杰拉斯 杰拉斯 | 时间：2013-10-15, Tue | 19,182 views
前端开发　

先来个Demo：

http://www.clanfei.com/demos/nav/nav.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：

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

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无限级CSS+JS导航菜单</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-active{
		position: relative;
	}
	.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>
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$('.nav .item').bind({
			mouseenter : function(){
				$(this).addClass('item-active').children('.nav').show();
			},
			mouseleave : function(){
				$(this).removeClass('item-active').children('.nav').hide();
			}
		});
	});
	</script>
</body>
</html>

如需转载请注明出处：杰拉斯的博客

相关文章

4 条评论 »

  1. Tater Tater

    137行太亮了.

    回复
    1. 蓝飞 蓝飞

      你眼睛太亮了= =。。

      回复
    2. 红色石头 红色石头

      看来tater在认真看代码啊~

      回复
  2. [纯耍帅] 纯CSS、兼容IE7+、宽度自适应、无限级导航菜单 | riaos

    [...]原文地址（我的博客）：http://www.clanfei.com/2013/10/1727.html[...]

    回复