CSS：响应式的导航菜单

源文章地址：http://webdesignerwall.com/tutorials/css-responsive-navigation-menu

最近我写了一点资料关于怎样制作一个响应式的移动导航栏，现在我发现了一个新的技术（有关HTML5）可以在没有使用Javascript的情况下做一个响应式菜单。这个菜单可以自动排列到左边、中间或者右边）。不像之前的教程需要点击某“开关”来显示或隐藏菜单，现在只需要把鼠标移到菜单按钮就会出现菜单列表（而且会提示当前所在的导航位置）。它可以在所有移动设备和桌面浏览器（包括IE）正常使用！

Demo地址：http://webdesignerwall.com/demo/responsive-menu/（用手机浏览器访问，或者缩小浏览器窗口访问）

目的

这篇文章的目的是向你展示怎样让一个菜单列表在小屏幕时自动转换成有规律的下拉列表菜单。

这个技巧对于那些有很多链接链接项的导航栏是很有用的，因为你可以让它们全部整合到一个下拉列表框控件中。

Html代码

下面是导航的Html元素。<Nav>标签是通过CSS的绝对定位属性来请求创建一个下拉列表框，我会在文章结尾解释这个做法。.current class标志它是一个当前所在的菜单导航位置。

<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代码很容易看懂，就不说细节了。需要注意我给nav<li>使用 displa: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;
}

IE支持

IE8及以下版本不支持HTML5的<nav>标签和媒体查询，可以通过包含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]-->

响应式

有趣的地方来了---通过媒体查询使菜单可响应！如果你对响应式设计还不是很熟悉，可以先看下我之前的文章 responsive design 和 media query。

在低于600px时进行断点判断，设置nav元素的position属性值为relative，将<ul>菜单列表position属性值设为absolute然后显示在顶部。通过 display:none 隐藏所有<li>元素，但保持类为 .current的<li>元素让它作为一个区域显示。然后在hover （鼠标移上去时执行）设置所有<li>重新显示出来（产生下拉列表的效果）。添加一个icon图在.current元素表明它是现在在访问的活动区域。访问demo看下最终效果。【这段的翻译好难~真想按自己的话说了算了~~】

@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;
	}
	
}

译者博客：http://blog.csdn.net/wowkk