趙 愛 濤

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

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

趙 愛 濤

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

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

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

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

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

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

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

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

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

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

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

2.1 用列表建立菜單項(xiàng)

代碼如下：

效果如圖1.

圖1 用列表建立菜單項(xiàng)效果圖

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

代碼如下：

效果見圖2.

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

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

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

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

圖3 圖2二級(jí)菜單項(xiàng)隱藏效果圖

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

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

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

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

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

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

代碼如下：

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

代碼如下：

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

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

3 結(jié)語(yǔ)

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

[1] 周靜.基于DIV+CSS網(wǎng)頁(yè)下拉菜單的實(shí)現(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