網(wǎng)頁下拉菜單的實(shí)現(xiàn)方法與比較分析

黃衛(wèi)+楊文遠(yuǎn)

摘要：該文闡述了使用CSS、javascript等技術(shù)將HTML無序列表生成動(dòng)態(tài)的下拉菜單，以及利用存儲(chǔ)于站點(diǎn)地圖中的數(shù)據(jù)“輕松”實(shí)現(xiàn)類似效果，各有其特點(diǎn)，廣泛應(yīng)用在網(wǎng)頁制作中。

關(guān)鍵詞：CSS；javascript；Menu；下拉菜單

中圖分類號(hào)：TP3 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2017）35-0238-01

1 概述

很多網(wǎng)站制作都會(huì)將導(dǎo)航（菜單）應(yīng)用進(jìn)來，以提升網(wǎng)站交互體驗(yàn)。下拉菜單是最常見的效果之一，用鼠標(biāo)移過去時(shí)，就會(huì)出現(xiàn)下一級(jí)子菜單，網(wǎng)站的結(jié)構(gòu)（頁面節(jié)點(diǎn)分布）展現(xiàn)的一目了然。制作下拉菜單可以是客戶端運(yùn)行的CSS、JavaScript等技術(shù)，也可以使用服務(wù)端運(yùn)行的Menu控件等。本文討論3種快速制作三級(jí)下拉菜單的方法，并闡述其特點(diǎn)，以供比較分析。

2 下拉菜單靜態(tài)部分

設(shè)計(jì)一個(gè)實(shí)現(xiàn)三級(jí)導(dǎo)航的下拉菜單，采用HTML文檔的無序列表，通過

和
• 標(biāo)記來制作出菜單分級(jí)效果，如圖1所示。

  HTML代碼如下：

  3 動(dòng)態(tài)效果的實(shí)現(xiàn)

  將鼠標(biāo)放在一級(jí)菜單上，彈出下拉菜單，移入位置加入不同顏色以示區(qū)別，鼠標(biāo)移走則菜單消失，本文介紹以下幾種方法。

  3.1 純CSS方法實(shí)現(xiàn)

  CSS提供了一個(gè)hover偽類，通過設(shè)置其display屬性的none、block值來控制下拉菜單的出現(xiàn)和隱藏。鼠標(biāo)移動(dòng)某級(jí)菜單時(shí)，所顯示的子菜單位置和父級(jí)菜單不一樣，使用position定位來控制下拉菜單的位置。設(shè)置float：left實(shí)現(xiàn)一級(jí)菜單為水平排列，而其他各級(jí)菜單則要求豎向排列，用：：after偽元素選擇器來清除浮動(dòng)。CSS代碼如下：