網頁下拉菜單的實現方法與比較分析

黃衛+楊文遠

摘要：該文闡述了使用CSS、javascript等技術將HTML無序列表生成動態的下拉菜單，以及利用存儲于站點地圖中的數據“輕松”實現類似效果，各有其特點，廣泛應用在網頁制作中。

關鍵詞：CSS；javascript；Menu；下拉菜單

中圖分類號：TP3 文獻標識碼：A 文章編號：1009-3044（2017）35-0238-01

1 概述

很多網站制作都會將導航（菜單）應用進來，以提升網站交互體驗。下拉菜單是最常見的效果之一，用鼠標移過去時，就會出現下一級子菜單，網站的結構（頁面節點分布）展現的一目了然。制作下拉菜單可以是客戶端運行的CSS、JavaScript等技術，也可以使用服務端運行的Menu控件等。本文討論3種快速制作三級下拉菜單的方法，并闡述其特點，以供比較分析。

2 下拉菜單靜態部分

設計一個實現三級導航的下拉菜單，采用HTML文檔的無序列表，通過

和
• 標記來制作出菜單分級效果，如圖1所示。

  HTML代碼如下：

  3 動態效果的實現

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

  3.1 純CSS方法實現

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