實現(xiàn)網(wǎng)頁下拉菜單的常用方法

趙 愛 濤

(石家莊職業(yè)技術(shù)學(xué)院 信息工程系，河北 石家莊 050081)

實現(xiàn)網(wǎng)頁下拉菜單的常用方法

趙 愛 濤

(石家莊職業(yè)技術(shù)學(xué)院 信息工程系，河北 石家莊 050081)

在討論網(wǎng)頁下拉菜單設(shè)計原則的基礎(chǔ)上，分析網(wǎng)頁下拉菜單的常用方法：設(shè)置一級菜單列表項鼠標(biāo)經(jīng)過樣式，使用JavaScript腳本或利用jQuery實現(xiàn)二級菜單的顯示.

網(wǎng)頁；下拉菜單；鼠標(biāo)經(jīng)過樣式；JavaScript；jQuery

在網(wǎng)頁中，必須使用簡單、清晰、明了的菜單選項，利用簡單易懂的文本，直接明了地表達(dá)菜單的意義，讓用戶直觀地了解菜單的導(dǎo)航方向.通常，在網(wǎng)頁中有一個主導(dǎo)航菜單就足夠了，無需增加不必要的導(dǎo)航菜單.二級導(dǎo)航主要用下拉菜單代替[1].

1 網(wǎng)頁下拉菜單的設(shè)計原則

(1) 除非必要，一般不使用多于兩級的下拉菜單.

(2) 每個菜單項應(yīng)該減少二級菜單項目的數(shù)量，下拉菜單中放置的選項應(yīng)不多于6個，且盡量最小化下拉菜單.如果分類較多，可以考慮將兩個相近分類或者頁面合二為一.這需要對網(wǎng)站的內(nèi)容進(jìn)行整合，做出更好的分類.

(3) 導(dǎo)航菜單除了使用文本，還可以使用明確的圖標(biāo)，以增加菜單的直觀性.

(4) 根據(jù)用戶從上到下、自左到右的閱讀習(xí)慣，在網(wǎng)頁中使用水平導(dǎo)航菜單更加方便.同時，它不會像垂直導(dǎo)航菜單那樣占用寶貴的頁面空間，使網(wǎng)頁更簡潔.

2 網(wǎng)頁導(dǎo)航下拉菜單的實現(xiàn)方法

本文以一款“花卉”網(wǎng)站的主導(dǎo)航為例，介紹導(dǎo)航下拉菜單的實現(xiàn)方法，且所有內(nèi)容只包含下拉菜單的實現(xiàn)，不涉及網(wǎng)頁的整體布局.

2.1 用列表建立菜單項

代碼如下：

效果如圖1.

圖1 用列表建立菜單項效果圖

2.2 使用CSS樣式設(shè)置使列表轉(zhuǎn)換成水平菜單項

代碼如下：

效果見圖2.

圖2 使用CSS樣式設(shè)置使列表轉(zhuǎn)換成水平菜單項效果圖

將二級菜單項的默認(rèn)狀態(tài)設(shè)置為隱藏，在style中加入代碼

li ul{ display:none;} /* 二級菜單列表默認(rèn)隱藏 */

結(jié)果如圖3所示.

圖3 圖2二級菜單項隱藏效果圖

2.3 鼠標(biāo)經(jīng)過時顯示、鼠標(biāo)離開時隱藏二級菜單的常用方法

2.3.1 一級菜單列表項鼠標(biāo)經(jīng)過后顯示二級菜單的樣式設(shè)置

在style標(biāo)簽中加入一級列表項的鼠標(biāo)經(jīng)過樣式，令二級菜單列表項按塊顯示出即可.代碼如下：li:hover ul{ display:block;}

這種方法比較簡單，不使用任何腳本，但不支持IE6.0及以下瀏覽器版本，IE8.0以上的瀏覽器版本都可以正常顯示.

2.3.2 使用JavaScript(簡稱JS)腳本實現(xiàn)二級菜單的顯示

JS代碼可以放在HTML頁面的任何位置.通常在文件head標(biāo)簽中加入script標(biāo)簽，定義為JS函數(shù)，實現(xiàn)“顯示子菜單”和“隱藏子菜單”功能.

代碼如下：

在有二級菜單的列表項，如本例中的“花卉分類”“養(yǎng)花常識”“花卉功能”和“花語簡介”的列表項中加入鼠標(biāo)事件，onmouseover鼠標(biāo)經(jīng)過事件和onmouseout鼠標(biāo)離開事件，引用在script中定義的函數(shù)“顯示子菜單”和“隱藏子菜單”.

代碼如下：

這三種方法都可以得到鼠標(biāo)經(jīng)過的下拉菜單效果，如圖4.

圖4 鼠標(biāo)經(jīng)過的下拉菜單效果圖

3 結(jié)語

除了上述三種常用方法外，對代碼不熟悉的開發(fā)者還可以利用一些網(wǎng)頁制作工具，如 Dreamweaver中的Spry菜單自動生成下拉菜單，甚至可以使用CSS Menu Generator或者CSS3Menu的網(wǎng)頁導(dǎo)航菜單制作工具來制作各種下拉菜單，這可簡化非專業(yè)開發(fā)者的制作過程.

[1] 周靜.基于DIV+CSS網(wǎng)頁下拉菜單的實現(xiàn)[J].福建電腦，2012(10)：171-172.

責(zé)任編輯：金 欣

Methods of drop-down menu on the webpage

ZHAO Ai-tao

(Department of Information Technology, Shijiazhuang University of Applied Technology, Shijiazhuang, Hebei 050081, China)

This paper discusses the designing principle and methods of the drop-down menu on the webpage. We can set up mouse to achieve the web drop-down menu in the main menu items, or use JavaScript or jQuery to achieve the display of drop-down menu.

webpage; drop-down menu; mouse; JavaScript; jQuery

2017-01-03

趙愛濤(1975-)，女，河北石家莊人，石家莊職業(yè)技術(shù)學(xué)院副教授.

1009-4873(2017)02-0042-03

TP393.02

A