基于CSS驅(qū)動(dòng)的多級(jí)下拉菜單的實(shí)現(xiàn)

摘要：本文講述了如何使用純CSS 代碼將嵌套的HTML無(wú)序列表轉(zhuǎn)化成多級(jí)下拉菜單，并簡(jiǎn)單闡述了如何為動(dòng)態(tài)腳本語(yǔ)言（如ASP、JSP和PHP等）提供可編程接口，從而使得存儲(chǔ)于數(shù)據(jù)庫(kù)中的下拉菜單數(shù)據(jù)“輕易”的融入HTML代碼中。

關(guān)鍵詞： CSS；HTML；下拉菜單

中圖分類(lèi)號(hào)：TP393.092 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007—9599 （2012） 14—0000—02

網(wǎng)站的導(dǎo)航（菜單）是指引用戶(hù)快速、準(zhǔn)確查找信息的主要途徑，很多網(wǎng)站都將導(dǎo)航組織成多級(jí)下拉菜單的形式來(lái)提高網(wǎng)站的交互性。一些網(wǎng)站的多級(jí)下拉菜單采用JavaScript腳本語(yǔ)言實(shí)現(xiàn)，但使用JavaScript實(shí)現(xiàn)的菜單可能會(huì)有一些風(fēng)險(xiǎn)，如用戶(hù)出于某種原因而禁止瀏覽器運(yùn)行JavaScript。

CSS提供了一些偽類(lèi)（如：hover偽類(lèi)），使得我們能夠應(yīng)用CSS偽類(lèi)來(lái)創(chuàng)建多級(jí)下拉菜單，從而擺脫JavaScript帶來(lái)的一些麻煩。

一、設(shè)計(jì)思想

本文討論的下拉菜單將采用嵌套的HTML無(wú)序列表進(jìn)行構(gòu)建——各級(jí)菜單及其子菜單都使用

標(biāo)簽創(chuàng)建，子菜單嵌套在父菜單
• 標(biāo)簽中。首先，我們需要將各子級(jí)菜單隱藏，通過(guò)設(shè)置CSS提供的display屬性實(shí)現(xiàn)。其次，我們需要設(shè)置當(dāng)鼠標(biāo)經(jīng)過(guò)各父級(jí)菜單時(shí)的行為（如鼠標(biāo)移動(dòng)到父級(jí)菜單時(shí)顯示其子菜單，鼠標(biāo)離開(kāi)父級(jí)菜單時(shí)隱藏其子菜單），通過(guò)使用：hover偽類(lèi)實(shí)現(xiàn)。最后，我們需要考慮的是子菜單的顯示位置（如一級(jí)菜單與二級(jí)菜單的顯示位置并不一樣），通過(guò)設(shè)置CSS提供的position屬性實(shí)現(xiàn)。

二、定義文檔結(jié)構(gòu)——編寫(xiě)HTML代碼

假設(shè)我們要設(shè)計(jì)一個(gè)圖書(shū)館網(wǎng)站的導(dǎo)航，頂級(jí)導(dǎo)航包括首頁(yè)、資源和新聞三項(xiàng)。資源含有一個(gè)子菜單，該子菜單包括期刊、圖書(shū)和論文三項(xiàng)。圖書(shū)含有一個(gè)子菜單，該子菜單包括中文圖書(shū)和西文圖書(shū)兩項(xiàng)。根據(jù)上述需求，我們最終將實(shí)現(xiàn)的效果及編寫(xiě)的HTML代碼分別如圖2—1與代碼2—1所示。

三、布局菜單

目前，代碼2—1在瀏覽器中運(yùn)行的結(jié)果為包含一些超鏈接的嵌套的垂直排列的無(wú)序列表。為了實(shí)現(xiàn)圖2—1所示效果，我們需要對(duì)無(wú)序列表進(jìn)行布局。在布局的過(guò)程中，會(huì)用到CSS的兩大布局工具——浮動(dòng)與定位。

我們先設(shè)置一些基本樣式，如網(wǎng)頁(yè)的字體、字號(hào)、修改無(wú)序列表的默認(rèn)樣式（如去掉列表項(xiàng)前面的圓點(diǎn)或方點(diǎn)）和去掉超鏈接的下劃線(xiàn)等，代碼如下所示。

接下來(lái)我們將無(wú)序列表由垂直轉(zhuǎn)化為水平，這里會(huì)用到第一個(gè)布局工具——浮動(dòng)工具。通過(guò)CSS提供的float屬性，我們可以輕易的實(shí)現(xiàn)由垂直到水平的轉(zhuǎn)變，代碼如下所示。

.menu li {float：left； margin—left：20px； border：1px solid；}

我們發(fā)現(xiàn)，在上述代碼的作用下，所有的無(wú)序列表都轉(zhuǎn)化為水平排列，而這并不是我們想要的效果。由圖2—1所示，只有頂級(jí)菜單需要轉(zhuǎn)化為水平排列。為解決此問(wèn)題，需要重新設(shè)置子菜單樣式，代碼如下所示。

接下來(lái)我們需要考慮子菜單的顯示位置，這里會(huì)用到第二個(gè)布局工具——定位工具。通過(guò)CSS提供的position、top、right、bottom和left屬性，我們可以輕易的將子菜單定位到任何位置。通常情況下，元素的定位是相對(duì)于根元素（即元素）進(jìn)行定位。為了更好的控制子菜單的顯示位置，我們會(huì)相對(duì)于子菜單的父級(jí)元素（將其position屬性設(shè)置為relative）進(jìn)行定位，這樣就不會(huì)由于父級(jí)菜單位置的變化而影響到子菜單位置的顯示，代碼如下所示。

四、美化菜單

接下來(lái)我們需要對(duì)菜單進(jìn)行美化，讓其看起來(lái)舒服一些。為了達(dá)到圖2—1所示的3D效果，我們需要設(shè)置

、
• 元素邊框及背景的顏色，這里我們將采用以字母#開(kāi)頭的十六進(jìn)制顏色值（如#fff表示白色）進(jìn)行設(shè)置，代碼如下所示。

現(xiàn)在，菜單在瀏覽器中運(yùn)行的效果如圖4—1所示。

根據(jù)圖4—1所示的效果，我們發(fā)現(xiàn)很難確定二級(jí)菜單所屬的父級(jí)菜單項(xiàng)（如果將中文圖書(shū)與西文圖書(shū)改為中文與西文，就難以分辨該菜單是屬于期刊還是屬于圖書(shū)）。所以，我們需要設(shè)置子菜單項(xiàng)的鼠標(biāo)懸停樣式來(lái)解決此問(wèn)題，代碼如下所示。

接下來(lái)我們需要考慮的是如何告訴用戶(hù)哪個(gè)菜單項(xiàng)含有子菜單，我們的解決辦法為給每個(gè)含有子菜單的

美化后的菜單在瀏覽器中運(yùn)行的效果如圖2—1所示。

五、實(shí)現(xiàn)“下拉”行為

菜單的布局及美化已經(jīng)完成，接下來(lái)我們將實(shí)現(xiàn)最為重要的效果——“下拉”行為。首先，我們需要將子菜單隱藏，然后將：hover偽類(lèi)應(yīng)用到含有子菜單的

在代碼第一行中，我們使用CSS派生選擇器對(duì)所有的子菜單進(jìn)行隱藏。在代碼第二行中，我們使用CSS子元素選擇器對(duì)當(dāng)前菜單項(xiàng)的子菜單進(jìn)行隱藏。

六、結(jié)束語(yǔ)

Web設(shè)計(jì)者在開(kāi)發(fā)網(wǎng)頁(yè)時(shí)遇到的最大困難就是瀏覽器的兼容性問(wèn)題。一些在某一種瀏覽器運(yùn)行良好的網(wǎng)頁(yè)，在另一種瀏覽器中可能產(chǎn)生令人驚訝的結(jié)果。如本文討論的多級(jí)下拉單在FireFox中表現(xiàn)完美，但在IE6中卻一塌糊涂。解決這種問(wèn)題可以使用一種針對(duì)IE的htc[3]文件，將其包含在CSS代碼中即可。

參考文獻(xiàn)：

[1]陸凌牛（著）. HTML5與CSS3權(quán)威指南.北京：機(jī)械工業(yè)出版社，2011，4（202—204）

[2]陸凌牛（著）. HTML5與CSS3權(quán)威指南.北京：機(jī)械工業(yè)出版社，2011，4（283—285）

[3]Eric A. Meyer（著）. Eric Meyer談CSS.北京：人民郵電出版社，2008（124—125）