鄒壽春

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

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

鄒壽春

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

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

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

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

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

1 核心技術(shù)

1.1 CSS簡介

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

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

1.2 CSS引用方式

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

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

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

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

〈style type="text/css"〉

#top1{font-weight:bold;…}

〈/Style〉

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

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

〈style type="text/css"〉

〈!--

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

--〉

〈/style〉

1.3 CSS盒子模型

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

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

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

1.4 CSS優(yōu)勢

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

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

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

圖1 設(shè)計流程圖

3 導航菜單的實現(xiàn)

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

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

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

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

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

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

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

3.2 設(shè)置導航菜單

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

3.3 美化導航菜單

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

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

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

4 結(jié)語

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

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

［2］溫謙.CSS網(wǎng)頁設(shè)計標準教程［M］].人民郵電出版社，2012.

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

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

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

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

［責任編輯：羅幼平］

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è)計。