最近我寫了一點資料關於怎樣製作一個響應式的移動導航欄，現在我發現了一個新的技術（有關HTML5）可以在沒有使用Javascript的情況下做一個響應式選單。這個選單可以自動排列到左邊、中間或者右邊）。不像之前的教程需要點選某“開關”來顯示或隱藏選單，現在只需要把滑鼠移到選單按鈕就會出現選單列表（而且會提示當前所在的導航位置）。它可以在所有移動裝置和桌面瀏覽器（包括IE）正常使用！

目的

這篇文章的目的是向你展示怎樣讓一個選單列表在小螢幕時自動轉換成有規律的下拉列表選單。

這個技巧對於那些有很多連結連結項的導航欄是很有用的，因為你可以讓它們全部整合到一個下拉列表框控制元件中。

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