鄒壽春

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

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

鄒壽春

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

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

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

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

常用創(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)插件，要么樣式簡單，不易修改等缺陷。針對以上創(chuàng)建導(dǎo)航菜單方法存在的不足，給出一種基于CSS創(chuàng)建導(dǎo)航菜單的方法。

1 核心技術(shù)

1.1 CSS簡介

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

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

1.2 CSS引用方式

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

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

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

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

〈style type="text/css"〉

#top1{font-weight:bold;…}

〈/Style〉

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

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

〈style type="text/css"〉

〈!--

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

--〉

〈/style〉

1.3 CSS盒子模型

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

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

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

1.4 CSS優(yōu)勢

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

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

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

圖1 設(shè)計流程圖

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

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

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

在此頁面中，根據(jù)布局安排，最上面一欄為Banner欄，放置系logo等；緊接一欄為導(dǎo)航菜單欄，共兩級菜單：一級菜單為橫排導(dǎo)航菜單，二級菜單采用豎排放置形式；后面區(qū)域?yàn)榫W(wǎng)頁所要宣傳的內(nèi)容。在設(shè)計導(dǎo)航菜單時，首先應(yīng)設(shè)置好菜單欄目內(nèi)容，確定菜單級別、菜單排列形式等，即導(dǎo)航菜單結(jié)構(gòu)。以下為部分導(dǎo)航菜單結(jié)構(gòu)圖（如圖2所示）及導(dǎo)航菜單設(shè)計流程圖（如圖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)航菜單比較簡單，僅對文本添加相應(yīng)鏈接，實(shí)現(xiàn)的效果比較單一；使用列表標(biāo)簽構(gòu)建的導(dǎo)航菜單，定義方便靈活，能實(shí)現(xiàn)美觀的效果，進(jìn)而起美化網(wǎng)頁作用。

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

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

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

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

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

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

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

4 結(jié)語

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

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

［2］溫謙.CSS網(wǎng)頁設(shè)計標(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)頁布局技巧研究［J］].計算機(jī)時代，2015(3)：14-17.

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

［6］劉瑞新.網(wǎng)頁設(shè)計與制作教程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

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