黃衛+楊文遠

摘要:該文闡述了使用CSS、javascript等技術將HTML無序列表生成動態的下拉菜單,以及利用存儲于站點地圖中的數據“輕松”實現類似效果,各有其特點,廣泛應用在網頁制作中。
關鍵詞:CSS;javascript;Menu;下拉菜單
中圖分類號:TP3 文獻標識碼:A 文章編號:1009-3044(2017)35-0238-01
1 概述
很多網站制作都會將導航(菜單)應用進來,以提升網站交互體驗。下拉菜單是最常見的效果之一,用鼠標移過去時,就會出現下一級子菜單,網站的結構(頁面節點分布)展現的一目了然。制作下拉菜單可以是客戶端運行的CSS、JavaScript等技術,也可以使用服務端運行的Menu控件等。本文討論3種快速制作三級下拉菜單的方法,并闡述其特點,以供比較分析。
2 下拉菜單靜態部分
設計一個實現三級導航的下拉菜單,采用HTML文檔的無序列表,通過
HTML代碼如下:
3 動態效果的實現
將鼠標放在一級菜單上,彈出下拉菜單,移入位置加入不同顏色以示區別,鼠標移走則菜單消失,本文介紹以下幾種方法。
3.1 純CSS方法實現
CSS提供了一個hover偽類,通過設置其display屬性的none、block值來控制下拉菜單的出現和隱藏。鼠標移動某級菜單時,所顯示的子菜單位置和父級菜單不一樣,使用position定位來控制下拉菜單的位置。設置float:left實現一級菜單為水平排列,而其他各級菜單則要求豎向排列,用::after偽元素選擇器來清除浮動。CSS代碼如下:
#nav {margin:100px auto; text-align:center;}
#nav ul {border-radius:10px;background:#CCFFFF;padding:020px;position:relative;list-style :none;}
#nav ul li {float:left; }
#nav ul::after {content:"";display:block;clear:both;}
#nav ul li a
{display:block;padding:25px40px;color:#000;text-decoration:none;font-family:Arial;}
#nav ul li:hover > ul {display:block;}
#nav ul li:hover{background:(#5F6975);}
#nav ul li, nav ul ul li:hover a {color:#FFF;}
#nav ulul
{display:none;background:#99CCCC;border-radius:0;position:absolute;top:100%;padding:0; }
#nav ul ul li {float:none;border-top:1px solid;border-bottom:1px solid;}
3.2 javascript方法實現
該方法通過參數li,在父級菜單鼠標放入時添加showsub(li)方法,以及鼠標離開時添加hidesub(li)方法實現子菜單的顯示與消失。制作中仍然引入CSS文件,美化導航菜單。
function showsub(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hidesub(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="none";
}
3.3 菜單Menu控件方法實現[1]
Menu控件運行于服務器端,擺脫了客戶端不確定因素,它與SiteMapDateSource控件搭配使用,設置Web.SiteMap站點地圖作為引用數據源。Web.SiteMap直觀體現了整個網站的結構和頁面間層級關系。如有更新,僅需對
4 三種方法的對比分析
通過以上介紹,第一種應用純CSS的方法實現起來快速簡單,不引用CSS3特效時,低版本瀏覽器運行無兼容性問題,布局與表現相分離使維護更加容易[2]。但對于 4級或以上菜單要按層級修改CSS代碼。第二方法也大量采用,腳本程序簡單,可能會受到客戶端禁用javascript等因素影響。第三方法優勢在于與站點地圖數據實時匹配,網站結構清晰,更新菜單層級和菜單項只需編輯Web.SiteMap,相比前兩種方法,更易維護,增加代碼更少。主要缺陷在于額外增加了服務器負擔。這三種方法網頁制作者可根據實際需求選擇使用,都有項目實踐的價值。
參考文獻:
[1] 劉乃琦, 郭小芳. ASP.NET應用開發與實踐[M].北京人民郵電出版社,2012.
[2] 魏穎穎.計算機技術與發展[J].基于CSS的網頁下拉菜單設計與實現, 2011(4).
客服熱線:400-656-5456 客服專線:010-56265043 電子郵箱:longyuankf@126.com
電信與信息服務業務經營許可證:京icp證060024號
Dragonsource.com Inc. All Rights Reserved