用CSS3設計響應式導航選單
HTML程式碼
下面是導航的HTML程式碼。<nav>標籤用於建立伸展條,包含絕對定位的css屬性。我會在稍後解釋這一點,current類表示當前啟用的菜單鏈接。
[html] view plain copy
- <nav class="nav">
- <ul>
- <
- <li><a href="#">Illustration</a></li>
- <li><a href="#">
- <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屬性來控制選單按鈕居左、居中或者居右對齊。
[html] view plain copy
- /* 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屬性更改按鈕的對其方式。
[html] view plain copy
- /* right nav */
- .nav.right ul {
- text-align: right;
- }
- /* center nav */
- .nav.center ul {
- text-align: center;
- }
IE支援
IE8或更早的版本不支援HTML5的<nav>標籤和媒介查詢(MediaQuery)。我們需要引用css3-mediaqueries.js(或者respond.js)和html5shim.js來提供支援。如果你不打算使用html5shim.js,可以把<nav>標籤用<div>代替。
[html] view plain copy
- <!--[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]-->
響應式設計
現在是最有意思的部分-使用媒介查詢建立響應式選單。如果你對響應式設計不瞭解,可以看看我之前關於響應式設計和媒介查詢的文章。
在600畫素的節點上,我將導航元素設定為相對定位,所以我能把頂部的<ul>選單列表樣式替換為絕對定位。通過設定display:none我隱藏所有的<li>元素,但是保留了當前啟用的<li>項。然後當滑鼠hover在導航欄上時,我將所有的<li>元素設定為display:block(這會產生伸展列表)。我添加了一個勾選圖示在當前欄目上來展示啟用狀態。對於居中和居右對齊的選單,使用position的left和right屬性來定位<ul>列表。可以根據演示來檢視最終結果。
[html] view plain copy
- @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 10px11px;
- 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;
- }
- }