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