WonderCSS

无需 JS 制作纯 CSS 子菜单

以为在做网站时常常需要用到“子菜单”,甚至是多层子菜单。这时不熟 JavaScript (简称 JS),无法自己编写JS菜单的人,比如我,往往需要在网上找一个JS菜单。那么实现子菜单并非只有JS才能够实现,只用 CSS 也可以实现。

纯CSS子菜单由于无需JS的编写所以很容易上手,但它由于是基于 CSS属性选择器 来完成,由此无法兼容IE6。如果你需要实现一个子菜单,又无需照顾陈旧的IE6的话,可以尝试下面我这个 纯CSS子菜单 编写思路。

由于本文章只是提供一个实现的思路,并非一个完善的实例,所以在样式上并不甚讲究。假设我们需要制作一个双层子菜单,主菜单ID为 main-nav 它的子菜单 Class 名为 sub-nav (因为子菜单是多次出现的,所以不能用ID),这个子菜单下的子菜单 Class 名为 last-nav 。

css-nav

它的 HTML 部分:


<ul id="main-nav">
	<li>
		<a href="">Nav01</a>
	</li>
	<li>
		<a href="">Nav02</a>
                <!--SubNav-->
		<ul class="sub-nav">
			<li>
				<a href="">SubNav1</a>
			</li>
			<li>
				<a href="">SubNav2</a>
			</li>
			<li>
				<a href="">SubNav3</a>
                                <!--LastNav-->
				<ul class="last-nav">
					<li><a href="">lastNav1</a></li>
					<li><a href="">lastNav2</a></li>
					<li><a href="">lastNav3</a></li>
				</ul>
			</li>
			<li>
				<a href="">SubNav4</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="">Nav03</a>
	</li>
</ul>

它的 CSS 部分:


body {
	padding:0; margin:0;
	font-size:12px;
	background-color:#FFFFFF;
}
ul,li {
	padding:0; margin:0;
	list-style:none;
}
a {
	color:#fff;
	text-decoration:none;
}
#main-nav {
	margin:20px;
}
#main-nav > li {
	float:left;
	position:relative;
	line-height:26px;
	padding:0 15px;
	background-color:#666666;
}
.sub-nav {
	display:none;
	position:absolute;
	top:26px; left:0;
	background-color:#333;
}
.sub-nav li {
	position:relative;
}
.sub-nav a {
	display:block;
	color:#fff;
	padding:0 10px;
}
.sub-nav a:hover {
	background:rgba(0,0,0,0.4);
}
.last-nav {
	display:none;
	position:absolute;
	top:0; left:100%;
	background-color:#222;
}
/* Key */
#main-nav > li:hover [class="sub-nav"],
.sub-nav > li:hover [class="last-nav"] {
	display:block;
}

纯CSS子菜单 的核心在于触发已经为 display:none; 的“子部分”为 display:block;,这里个条件的实现就是用到 CSS属性选择器 的特性,它可以在 CSS 中做出判断进而实现样式的改变。这段CSS的核心在于:


.sub-nav,
.last-nav {
	display:none;
}
#main-nav > li:hover [class="sub-nav"],
.sub-nav > li:hover [class="last-nav"] {
	display:block;
}

#main-nav > li:hover 确定并保证了触发子菜单的动作条件,这里的“ > ”如果不懂请了解 关于CSS样式表里面的大于号。当满足这个条件时, 其后的 [class=”XXX”] 才得以运行。

本文仅提供一个思路,众多细节及效果还可以详细雕琢。本网站顶部的分享按钮就是以此方法实现的,可供参考。

By 于湛 发布于 2013.02.28 4,129 次浏览

无需 JS 制作纯 CSS 子菜单》上有1条评论

  1. Pingback引用通告: 让我们来了解20个常用CSS选择器吧 | WonderCSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注