基于CSS創(chuàng)建導(dǎo)航菜單研究

鄒壽春

（閩西職業(yè)技術(shù)學(xué)院 計(jì)算機(jī)系，福建 龍巖 364021）

基于CSS創(chuàng)建導(dǎo)航菜單研究

鄒壽春

（閩西職業(yè)技術(shù)學(xué)院 計(jì)算機(jī)系，福建 龍巖 364021）

導(dǎo)航菜單是網(wǎng)站中常見(jiàn)而重要的元素，為瀏覽者瀏覽網(wǎng)頁(yè)提供方便。首先簡(jiǎn)單分析別的創(chuàng)建導(dǎo)航菜單方法的不足，接著研究核心技術(shù)，得出基于CSS創(chuàng)建導(dǎo)航菜單的方法可行有效，最后以實(shí)例展示基于CSS創(chuàng)建導(dǎo)航菜單的過(guò)程。實(shí)驗(yàn)證明基于CSS創(chuàng)建導(dǎo)航菜單的方法高效、實(shí)用。

CSS；導(dǎo)航菜單；網(wǎng)頁(yè)設(shè)計(jì)

時(shí)下是網(wǎng)絡(luò)技術(shù)高速發(fā)展的時(shí)代，因特網(wǎng)已盛行于人們生活的方方面面。人們遨游于網(wǎng)絡(luò)海洋中時(shí)，最常碰到的當(dāng)數(shù)各類網(wǎng)站。在一個(gè)網(wǎng)站中，常通過(guò)導(dǎo)航菜單及別的超級(jí)鏈接實(shí)現(xiàn)訪問(wèn)站點(diǎn)內(nèi)各個(gè)獨(dú)立網(wǎng)頁(yè)的操作?？梢哉f(shuō)，導(dǎo)航菜單是網(wǎng)站設(shè)計(jì)中一塊重要組成部分。

常用創(chuàng)建導(dǎo)航菜單的方法主要有：使用JavaScript代碼編程實(shí)現(xiàn)；使用JQuery實(shí)現(xiàn)[1]；使用第三方軟件（如Flash等）實(shí)現(xiàn)；使用插入Dreamweaver所帶“Spry菜單欄”實(shí)現(xiàn)。但以上方法存在要么所用代碼較多，要么須關(guān)聯(lián)插件，要么樣式簡(jiǎn)單，不易修改等缺陷。針對(duì)以上創(chuàng)建導(dǎo)航菜單方法存在的不足，給出一種基于CSS創(chuàng)建導(dǎo)航菜單的方法。

1 核心技術(shù)

1.1 CSS簡(jiǎn)介

CSS（層疊樣式表，即Cascading Style Sheets的英文縮寫），是W3C組織制定的，用于控制網(wǎng)頁(yè)內(nèi)容顯示效果的一種標(biāo)記性語(yǔ)言。CSS由選擇器、屬性和屬性值三部分構(gòu)成，其語(yǔ)法格式為：

選擇器{屬性1:屬性值1;屬性2:屬性值2;……}語(yǔ)法格式中，屬性必須包含在{}中；屬性與屬性值之間用英文標(biāo)點(diǎn)“:”分開(kāi)；屬性之間用英文標(biāo)點(diǎn)“;”分開(kāi)。選擇器可分為基本型選擇器與特殊型選擇器兩大類，基本選擇器有標(biāo)記選擇器、類別選擇器和ID選擇器3種[2]，特殊型選擇器主要由基本選擇器復(fù)合而成，包括組合選擇器、群組選擇器、后代選擇器、子選擇器、相鄰選擇器、屬性選擇器、偽類選擇器、通配符選擇器。

1.2 CSS引用方式

CSS使用非常靈活。根據(jù)它被引用的位置，可分為內(nèi)部樣式表與外部樣式表兩大類。內(nèi)部樣式表包含行內(nèi)式、內(nèi)嵌式兩種情況，直接作用于網(wǎng)頁(yè)文檔；外部樣式表可被站點(diǎn)內(nèi)多個(gè)網(wǎng)頁(yè)文檔重復(fù)引用，采用鏈接方式或?qū)敕绞阶饔糜诰W(wǎng)頁(yè)文檔。外部樣式表經(jīng)常用于定義整個(gè)站點(diǎn)的整體風(fēng)格，對(duì)后期維護(hù)帶來(lái)方便，提高效率，所以使用較多。

各引用方式格式舉例如下：

◆行內(nèi)式（直接作為標(biāo)簽style屬性值），例：〈p style="color:#FF00FF; font-weight:bold;…"〉

◆內(nèi)嵌式（定義在網(wǎng)頁(yè)文檔頭部〈style〉與〈/style〉標(biāo)簽內(nèi)），例：

〈style type="text/css"〉

#top1{font-weight:bold;…}

〈/Style〉

◆鏈接式（在網(wǎng)頁(yè)文檔頭部鏈接外部樣式文件），例： 〈link href="外部樣式表文件名.css" rel="stylesheet" type="text/css"〉 /*href的屬性值為外部樣式表文件相對(duì)路徑*/

◆導(dǎo)入式（在網(wǎng)頁(yè)文檔頭部〈style〉與〈/style〉標(biāo)簽內(nèi)導(dǎo)入外部樣式文件），例：

〈style type="text/css"〉

〈!--

@import url(“外部樣式表文件名.css”); /*url后括號(hào)內(nèi)注明外部樣式表文件相對(duì)路徑*/

--〉

〈/style〉

1.3 CSS盒子模型

盒子模型是CSS的基石之一，布局最重要的概念，它指定元素如何呈現(xiàn)在頁(yè)面當(dāng)中。盒模型將頁(yè)面中的每個(gè)元素看做一個(gè)矩形框，這個(gè)框由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。

盒子內(nèi)可再嵌套盒子，然后對(duì)每個(gè)盒子進(jìn)行定位。CSS定位通過(guò)position屬性的值實(shí)現(xiàn)，屬性值有：static、 relative、absolute 、fixed。但這種定位方式，盒子并未脫離文檔流的控制，排列仍受很大限制。為了靈活定位盒子，可設(shè)置盒子float屬性，實(shí)現(xiàn)盒子浮動(dòng)，使盒子脫離文檔流靈活布局。float屬性值有：none、left、right 3種，其中none表示不浮動(dòng)；left（或right）表示向其父元素的左（或右）側(cè)靠緊。當(dāng)浮動(dòng)出現(xiàn)錯(cuò)位時(shí)，可以設(shè)置clear屬性清除。清除浮動(dòng)既能夠解決頁(yè)面錯(cuò)位的問(wèn)題，又能解決子級(jí)元素浮動(dòng)導(dǎo)致父級(jí)元素背景無(wú)法自適應(yīng)子級(jí)元素高度的問(wèn)題。

關(guān)于盒子顯示及隱藏，可通過(guò)設(shè)置display屬性值實(shí)現(xiàn)。display屬性決定將元素顯示為塊元素、內(nèi)聯(lián)元素、列表項(xiàng)目或其他類型的元素[3]。display屬性值有多種，最常用的有：block、inline、none。值block表示此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符；inline為默認(rèn)值，表示此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符；none表示此元素不會(huì)被顯示。

1.4 CSS優(yōu)勢(shì)

CSS具有許多優(yōu)點(diǎn)：語(yǔ)法簡(jiǎn)單，便于編寫；代碼簡(jiǎn)潔，提高網(wǎng)頁(yè)瀏覽速度；結(jié)構(gòu)清晰，易于搜索；采用盒子模型，利于網(wǎng)頁(yè)結(jié)構(gòu)布局；獨(dú)立CSS文檔，方便網(wǎng)站修改維護(hù)。由于CSS從真正意義上實(shí)現(xiàn)了網(wǎng)頁(yè)內(nèi)容與它的外觀相分離[4]，其正被廣大網(wǎng)頁(yè)設(shè)計(jì)者所青睞。

2 導(dǎo)航菜單設(shè)計(jì)步驟

導(dǎo)航菜單是一種重要的超級(jí)鏈接，在網(wǎng)站中起到非常重要的作用，為瀏覽者在網(wǎng)站中快速瀏覽各類重要內(nèi)容提供方便。根據(jù)導(dǎo)航菜單放置位置劃分可分為橫排導(dǎo)航菜單和豎排導(dǎo)航菜單[5]，可按頁(yè)面的總體布局要求設(shè)置不同排列方式的導(dǎo)航菜單。導(dǎo)航菜單設(shè)計(jì)一般有創(chuàng)建、設(shè)置、美化三個(gè)步驟，以下為菜單設(shè)計(jì)流程：

圖1 設(shè)計(jì)流程圖

3 導(dǎo)航菜單的實(shí)現(xiàn)

導(dǎo)航菜單放置形式多樣，但所涉及核心技術(shù)都相似，只要稍加修改，即可實(shí)現(xiàn)相應(yīng)效果。在這以閩西職業(yè)技術(shù)學(xué)院計(jì)算機(jī)系（http://www.mxdx.net/jsj/）主頁(yè)導(dǎo)航菜單為例，展示其設(shè)計(jì)與實(shí)現(xiàn)過(guò)程。

圖2 網(wǎng)站部分布局效果

在此頁(yè)面中，根據(jù)布局安排，最上面一欄為Banner欄，放置系logo等；緊接一欄為導(dǎo)航菜單欄，共兩級(jí)菜單：一級(jí)菜單為橫排導(dǎo)航菜單，二級(jí)菜單采用豎排放置形式；后面區(qū)域?yàn)榫W(wǎng)頁(yè)所要宣傳的內(nèi)容。在設(shè)計(jì)導(dǎo)航菜單時(shí)，首先應(yīng)設(shè)置好菜單欄目?jī)?nèi)容，確定菜單級(jí)別、菜單排列形式等，即導(dǎo)航菜單結(jié)構(gòu)。以下為部分導(dǎo)航菜單結(jié)構(gòu)圖（如圖2所示）及導(dǎo)航菜單設(shè)計(jì)流程圖（如圖3所示）。

圖3 導(dǎo)航菜單結(jié)構(gòu)圖

3.1 創(chuàng)建導(dǎo)航菜單

創(chuàng)建導(dǎo)航菜單的方法可以分為普通的超鏈接導(dǎo)航菜單和使用列表標(biāo)簽構(gòu)建的導(dǎo)航菜單[6]。普通的超鏈接導(dǎo)航菜單比較簡(jiǎn)單，僅對(duì)文本添加相應(yīng)鏈接，實(shí)現(xiàn)的效果比較單一；使用列表標(biāo)簽構(gòu)建的導(dǎo)航菜單，定義方便靈活，能實(shí)現(xiàn)美觀的效果，進(jìn)而起美化網(wǎng)頁(yè)作用。

此處使用列表標(biāo)簽創(chuàng)建導(dǎo)航菜單，首先創(chuàng)建基于〈ul〉無(wú)序列表菜單，用〈li〉標(biāo)簽列出一級(jí)菜單項(xiàng)；對(duì)于有二級(jí)子菜單的菜單，可在〈li〉與〈/li〉內(nèi)嵌套〈ul〉無(wú)序列表，用〈li〉標(biāo)簽列出二級(jí)子菜單項(xiàng)。用這種方法，對(duì)于有三級(jí)子菜單的創(chuàng)建一樣適用。以下為創(chuàng)建導(dǎo)航的部分源代碼：

3.2 設(shè)置導(dǎo)航菜單

導(dǎo)航菜單一般效果為當(dāng)鼠標(biāo)移至父菜單時(shí)，能自動(dòng)彈出子菜單，這就涉及定位、顯示及隱藏等問(wèn)題。通過(guò)定義各個(gè)盒子樣式可實(shí)現(xiàn)，主要選擇器類型有：ID選擇器、群組選擇器、后代選擇器、偽類選擇器。把這些定義的樣式集中在sty.css外部樣式文件中，采用鏈接方式引用到網(wǎng)頁(yè)文檔頭部，其鏈接代碼為〈link href="css/sty.css" rel="stylesheet" type="text/css" /〉。以下給出定義的樣式及部分說(shuō)明：

3.3 美化導(dǎo)航菜單

為了使導(dǎo)航菜單與眾不同，增加網(wǎng)頁(yè)的生動(dòng)活潑性，達(dá)到美化網(wǎng)頁(yè)的效果，可為其適當(dāng)加上效果，如當(dāng)鼠標(biāo)移到相關(guān)菜單項(xiàng)時(shí)，相關(guān)菜單底色變化、或字體變大、或凸出顯示等，這些效果可以通過(guò)設(shè)置相關(guān)屬性值實(shí)現(xiàn)。當(dāng)然，在美化導(dǎo)航菜單時(shí)，并不是特效越多越好，應(yīng)該把握尺度，盡量做到生動(dòng)但不花哨。在此僅以添加改變字體顏色效果為例，作簡(jiǎn)單說(shuō)明，實(shí)現(xiàn)代碼為#menu li a:hover{color: #0000CC;}。

圖4 設(shè)置前菜單效果

圖5 設(shè)置后菜單效果

4 結(jié)語(yǔ)

通過(guò)實(shí)踐證明，本文所提出的基于CSS創(chuàng)建導(dǎo)航菜單的方法是可行的，此方法思路清晰，代碼簡(jiǎn)潔，適用性強(qiáng)。靈活運(yùn)用CSS特性，掌握CSS使用技巧，可創(chuàng)建出形式多樣、適合各種風(fēng)格的導(dǎo)航菜單。CSS不僅在創(chuàng)建菜單方向，而且在布局網(wǎng)頁(yè)、美化網(wǎng)頁(yè)等方面都有突出表現(xiàn)。由于CSS（層疊樣式表）語(yǔ)法簡(jiǎn)單、功能強(qiáng)大，增強(qiáng)了控制頁(yè)面外觀的能力，所以越來(lái)越被網(wǎng)頁(yè)設(shè)計(jì)者所采用。隨著CSS技術(shù)為大家熟悉并大量使用，CSS必將成為網(wǎng)頁(yè)設(shè)計(jì)利器。

［1］王燕妮.下拉菜單的實(shí)現(xiàn)方法及比較［J］].電腦編程技巧與維護(hù)，2014(24)：20-21.

［2］溫謙.CSS網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)教程［M］].人民郵電出版社，2012.

［3］Hakon Wium Lie.Cascading Style Sheets:Designing for the Web Third Edition［M］.祁玉芹，譯.清華大學(xué)出版社，2009.

［4］劉海霞. DIV_CSS網(wǎng)頁(yè)布局技巧研究［J］].計(jì)算機(jī)時(shí)代，2015(3)：14-17.

［5］鄒欣.DIV+CSS商業(yè)案例與網(wǎng)頁(yè)布局開(kāi)發(fā)精講［M］.中國(guó)鐵道出版社，2010.

［6］劉瑞新.網(wǎng)頁(yè)設(shè)計(jì)與制作教程HTML+CSS+JavaScript［M］.機(jī)械工業(yè)出版社，2013.

［責(zé)任編輯：羅幼平］

TP311.1

A

1672-1047（2015）04-0109-04

10.3969/j.issn.1672-1047.2015.04.28

2015-07-06

鄒壽春，男，福建連城人，講師，工程碩士。研究方向：圖像處理、動(dòng)漫設(shè)計(jì)與制作、網(wǎng)站設(shè)計(jì)。