css 導覽功能表實現代碼

本文教程旨在教你如何建立一個使用HTML5+CSS的自適應導覽功能表，它不需要用到javascript，而且可以居左，置中和居右，這個菜單不是通過點擊顯示的，它是滑鼠滑過的時候顯示出來的，並且相容各種瀏覽器包括手機用戶端和IE瀏覽器。

這個小技巧在一個有很多導覽功能表的時候可以摺疊為一個元素的下拉式功能表時很有用。希望你會喜歡。

HTML代碼
這裡面的<nav>標誌作為建立下拉式功能表的定位是必須的，下面的教程中我將會解釋這是怎麼回事，另外.current是作為一個啟用/當前的菜單樣式

代碼如下	複製代碼
<nav> <ul> <li><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代碼在案頭版上已經可以實現了，我們注意到裡面使用了inline-block替換了float:left;來作為列表形式，那是因為inline-block可以使得功能表按鈕可以在UL裡面置中或者居右。

代碼如下

複製代碼

/* 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; }置中或者居右 /* right nav */ .nav.right ul { text-align: right; } /* center nav */ .nav.center ul { text-align: center; }

支援IE瀏覽器
IE9以下瀏覽器不支援<nav>標籤，我們可以引入js來實現支援，如果你不想使用js，可以將nav改為div

代碼如下	複製代碼
<!--[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以下的表單中，我將nav下面的UL改為固定，然後隱藏掉下面的子級菜單，保留.current的子級菜單，同時在滑鼠滑過的時候顯示所有的子級菜單，同時修改了.current的子級菜單樣式。

而置中和居右，則是通過對UL的position來設定的。具體請對照代碼

代碼如下

複製代碼

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

這篇教程是來自國外的一個網站，在這裡，我覺得他這個思路非常新穎而且非常合理，代碼也寫得比較清晰，值得以後設計這類菜單的時候用這種方式