CSS 自适应导航菜单

文章目录

以前我写了一篇关于如何为自适应网页制作教程手机导航菜单，现在我又摸索出一种无需JS脚本的自适应导航菜单，它采用纯粹的语义化HTML5标签来完成。该菜单可以左对齐，居中或右对齐，也不像上一种方法中需要点击来展开列表，本例中悬停激活更加方便，而且它能通过标记表明当前位置。它适用于所有的移动和桌面浏览器，包括万恶的Internet Explorer！

示例：自适应菜单             http://webdesignerwall.com/demo/responsive-menu/

目的

本教程的目的是展示如何将一个常规列表菜单变成下拉菜单，用来适应较小的屏幕，如下图效果：

 

 

这种方案对下图所示的多条目导航栏效果显著，可以将多个条目合并成为一个优雅的下拉列表。

 

 

HTML nav标签

该标签用于导航栏，<nav>标签通过绝对位置position:absolute属性来创建下拉菜单，我将会在后文中解释；.current标签表示活动/当前页面链接。

复制

<nav class="nav">
	<ul>
		<li class="current"><a href="#">Portfolio</a></li>
		<li><a href="#">Illustration</a></li>
		<li><a href="#">Web Design</a></li>
		<li><a href="#">Print Media</a></li>
		<li><a href="#">Graphic Design</a></li>
	</ul>
</nav>

CSS

由于导航栏（桌面视图）的CSS是相当直接明了，在此就不细表。请注意，这里为<li>元素指定display:inline-block ，而不是float:left属性。这样对<ul>元素指定text-align内容，就可以让菜单按钮左对齐、居中或右对齐。

复制

/* nav */
.nav {
	position: relative;
	margin: 20px 0;
}
.nav ul {
	margin: 0;
	padding: 0;
}
.nav li {
	margin: 0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
}
.nav a {
	padding: 3px 12px;
	text-decoration: none;
	color: #999;
	line-height: 100%;
}
.nav a:hover {
	color: #000;
}
.nav .current a {
	background: #999;
	color: #fff;
	border-radius: 5px;
}

居中和右对齐

正如上文所述，可以使用text-align属性来改变按钮的对齐。

复制

/* right nav */
.nav.right ul {
	text-align: right;
}

/* center nav */
.nav.center ul {
	text-align: center;
}

Internet Explorer的支持

HTML5 <nav>标签和media query不被Internet Explorer 8或以下版本支持，当然考虑到他们的市场占有量已经很小，可以忽略这些。CSS3-mediaqueries.js （或respond.js ）和html5shim.js均提供后备支持。如果你不希望加载html5shim.js，使用<div>标签替换<nav>。

复制

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

自适应

现在这里是有趣的部分 – 让菜单根据media query规则来自适应！如果看过我以前的文章：自适应设计和media query ，你不会对自适应感到陌生。

以600px为分界点，设置nav元素设为相对位置position: relative，这样就可以把<ul>菜单列表用绝对位置position: absolute固定在顶部；并且使用display:none属性隐藏所有<li>元素，但保留.current <li>显示为块（block）；然后是nav悬停属性，将所有<li>变回显示display:block，这将产生下拉列表；为.current元素添加了图标，以表明它是当前页面。对于菜单居中和右对齐问题，这里使用left和righ属性来定位<ul>。查看演示 ，看看最终效果。

复制

@media screen and (max-width: 600px) {
	.nav {
		position: relative;
		min-height: 40px;
	}	
	.nav ul {
		width: 180px;
		padding: 5px 0;
		position: absolute;
		top: 0;
		left: 0;
		border: solid 1px #aaa;
		background: #fff url(images/icon-menu.png) no-repeat 10px 11px;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.nav li {
		display: none; /* hide all <li> items */
		margin: 0;
	}
	.nav .current {
		display: block; /* show only current <li> item */
	}
	.nav a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: left;
	}
	.nav .current a {
		background: none;
		color: #666;
	}

	/* on nav hover */
	.nav ul:hover {
		background-image: none;
	}
	.nav ul:hover li {
		display: block;
		margin: 0 0 5px;
	}
	.nav ul:hover .current {
		background: url(images/icon-check.png) no-repeat 10px 7px;
	}

	/* right nav */
	.nav.right ul {
		left: auto;
		right: 0;
	}

	/* center nav */
	.nav.center ul {
		left: 50%;
		margin-left: -90px;
	}	
}