2012/11/2 16:13:52作者:佚名來源:網(wǎng)絡(luò)
【實例名稱】
隱藏式菜單
【實例描述】
菜單是網(wǎng)站的常用導(dǎo)航形式,為了保證頁面的整體效果,有時候需要將菜單隱藏起來。當(dāng)用戶需要的時侯再顯示出來。本例學(xué)習(xí)如何制作隱藏式菜單。
【實例代碼】
<html> <head> <TITLE>隱藏式菜單-學(xué)無憂(m.wangbatian.cn)</title> <META http-equiv=Content-Type content="text/html; charset=gb2312"> </HEAD> <BODY> <SCRIPT language="javascript"> //狀態(tài)欄顯示信息 function MM_displayStatusMsg(msgStr) { status=msgStr; document.MM_returnValue = true; } //高亮顯示 function highlight(x) { document.forms[x].elements[0].focus() document.forms[x].elements[0].select() } //菜單彈出時的處理 function MM_jumpMenu(targ,selObj,restore) { eval(targ+".location='"+selObj. options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } var NS; IE=document.all; NS=document.layers; hdrFontFamily="Verdana"; hdrFontSize="2"; hdrFontColor="white"; hdrBGColor="#CCCCCC"; linkFontFamily="Verdana"; linkFontSize="2"; linkBGColor="white"; linkOverBGColor="#CCCCCC"; linkTarget="_top"; YOffset=60; staticYOffset=20; menuBGColor="#CCCCCC"; menuIsStatic="no"; menuHeader="主流索引" menuWidth=150; staticMode="advanced" barBGColor="#C0C0C0"; barFontFamily="Verdana"; barFontSize="2"; barFontColor="white"; barText="導(dǎo)航菜單"; //鼠標(biāo)移走時的菜單處理 function moveOut() { if (window.cancel) { cancel="";} if (window.moving2) { clearTimeout(moving2); moving2=""; } if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) { if (IE) {ssm2.style.pixelLeft += (5%menuWidth); } if (NS) { document.ssm2.left += (5%menuWidth); } moving1 = setTimeout('moveOut()', 5) } else { clearTimeout(moving1) } }; function moveBack() { cancel = moveBack1() } function moveBack1() { if (window.moving1) { clearTimeout(moving1) } if ((IE && ssm2.style.pixelLeft> (-menuWidth))||(NS && document.ssm2.left>(-150))) { if (IE) {ssm2.style.pixelLeft -= (5%menuWidth); } if (NS) { document.ssm2.left -= (5%menuWidth); } moving2 = setTimeout('moveBack1()', 5)} else { clearTimeout(moving2) } }; lastY = 0; //根據(jù)瀏覽器類型設(shè)置菜單模式 function makeStatic(mode) { if (IE) {winY = document.body.scrollTop;var NM=ssm2.style } if (NS) {winY = window.pageYOffset;var NM=document.ssm2 } if (mode=="smooth") { if ((IE||NS) && winY!=lastY) { smooth = .2 * (winY - lastY); if(smooth > 0) smooth = Math.ceil(smooth); else smooth = Math.floor(smooth); if (IE) NM.pixelTop+=smooth; if (NS) NM.top+=smooth; lastY = lastY+smooth; } setTimeout('makeStatic("smooth")', 1) } else if (mode=="advanced") { if ((IE||NS) && winY>YOffset-staticYOffset) { if (IE) {NM.pixelTop=winY+staticYOffset } if (NS) {NM.top=winY+staticYOffset } } else { if (IE) {NM.pixelTop=YOffset} if (NS) {NM.top=YOffset-7 } } setTimeout('makeStatic("advanced")', 1) } } //根據(jù)瀏覽器類型初始化菜單 function init() { if (IE) { ssm2.style.pixelLeft = -menuWidth; ssm2.style.visibility = "visible" } else if (NS) { document.ssm2.left = -menuWidth; document.ssm2.visibility = "show" } else { alert('瀏覽器類型判斷錯誤!') } } //當(dāng)用戶選擇菜單時,在狀態(tài)欄提示導(dǎo)航地址 function MM_displayStatusMsg(msgStr) { status=msgStr; document.MM_returnValue = true;
} //判斷瀏覽器類型 if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ; Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20; width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS) {document.write('<LAYER visibility="hide" top="'+ YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')} tempBar=""; for (i=0;i<barText.length;i++) { tempBar+=barText.substring(i, i+1)+"<BR>"} document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"> <font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>') //添加菜單內(nèi)容項的方法 function addItem(text, link, target) { if (!target) {target=linkTarget} document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER> <LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"> <FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+ text+'</A></FONT></LAYER></ILAYER></TD></TR>') }
//為菜單添加分類標(biāo)題的方法 function addHdr(text) { document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>') } //下面是菜單內(nèi)容和指定的導(dǎo)航地址 addItem('初級搜索', 'http://www.google.com', '');
addItem('中級搜索', 'http://www.google.com', '');
addItem('搜索原理', 'http://www.google.com', '');
addItem('深入搜索', 'http://www.google.com', '');
addItem('垂直搜索', 'http://www.google.com', '_blank');
addHdr('幫助'); //菜單標(biāo)題
addItem('會員專屬論壇', 'http://www.google.com', '_blank');
document.write('<tr><td bgcolor="'+hdrBGColor+'"> <font size="0" face="Arial"> </font></td></TR></table>')
if (IE) {document.write('</DIV>')}
if (NS) {document.write('</LAYER>')}
if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);} window.onload=init; </SCRIPT>
本例中用到的樣式代碼如下所示:
<STYLE> #ssm2 A { FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: verdana; TEXT-DECORATION: none} #ssm2 A:hover { COLOR: #ccff33} </STYLE> </body> </html>
【運(yùn)行效果】
【難點(diǎn)剖析】
本例中的主要方法是“addItem”和“addHdr”?!癮ddItem”方法主要完成菜單項的添加,“addHdr”方法則為菜單添加分類標(biāo)題,如本例中的“主流索引”和“幫助”。本例中還需要注意的是如何判斷IE瀏覽器和非IE瀏覽器,因為針對不同瀏覽器的JaVaScript對象有所區(qū)別。
【源碼下載】
為了JS代碼的準(zhǔn)確性,請點(diǎn)擊:隱藏式菜單 進(jìn)行本實例源碼下載
標(biāo)簽: JS代碼 菜單 隱藏
相關(guān)文章
ABBYY FineReader 15中文v15.0.18.1494
詳情Adobe indesign cs6中文版
詳情金山數(shù)據(jù)恢復(fù)大師官方版 v1.0.0.2
詳情南方測繪Cass10v10.1.6中文
詳情revit 2017
詳情KeyShot Pro 9中文(附安裝教程) v9.0.286
詳情網(wǎng)易新聞客戶端v105.3
詳情AIMP4v5.11.2421中文綠色美化版
詳情onekey一鍵還原v18.0.18.1008
詳情浩辰CAD2020綠色v20.0
詳情好圖網(wǎng)圖標(biāo)轉(zhuǎn)換工具v4.9.7
詳情aardiov35.0.0中文最新版
詳情Adobe Creative Cloud 2024簡體中文v5.3.0.48
詳情暴風(fēng)影音16 v9.04.1029去廣告精簡版
詳情ASP.NET Maker 2019(ASP.NET代碼生成工具)v12.0.4.0
詳情暴風(fēng)影音v5.92.0824.1111
詳情使命召喚17官方中文版 v1.0
詳情死亡之雨新的僵尸病毒中文v1.0綠色免安裝版
詳情輻射4v1.7.15.0整合版
詳情克莉2v1.0中文版
詳情冬日計劃v1.2中文版
詳情刺客信條英靈殿v1.0吾愛
詳情刺客信條英靈殿終極v1.0免安裝
詳情動物森友會v1.10.0最新
詳情哈迪斯殺出地獄v1.37中文
詳情嗜血印中文豪華版v1.0豪華版 附游戲攻略秘籍
詳情城市戰(zhàn)斗v1.0中文
詳情尼爾人工生命v1.0steam免費(fèi)
詳情尼爾人工生命升級版v1.0PC
詳情層層恐懼2中文v1.0綠色免安裝版
詳情往日不再v1.0 steam
詳情往日不再v1.0pc
詳情圣劍聯(lián)盟官方正版v3.5.3安卓版
詳情小生活游戲內(nèi)置MOD版v2.0(78)安卓版
詳情使命召喚手游測試服最新版v1.9.41安卓版
詳情三國謀定天下官服v1.2.1安卓版
詳情熱血新手村高爆版v1.0.0安卓版
詳情我養(yǎng)你啊手機(jī)版v1.0.0安卓版
詳情看懂了就很恐怖的故事(細(xì)思極恐)中文版v1.0安卓版
詳情背包英雄中文手機(jī)版v1.1.1安卓版
詳情glow官方版v2.0.9安卓版
詳情三國大時代4霸王立志官方正版v1.9安卓版
詳情飛盧小說閱讀器手機(jī)版v7.0.9安卓版
詳情牛?;浾Z詞典軟件v20.4.4安卓版
詳情PrettyUp視頻美化瘦身軟件v2.3.0
詳情化學(xué)方程式app中文版v1.1.0.20安卓版
詳情地下城堡3魂之詩2024安卓最新版v1.2.3安卓版
詳情南方都市報v6.10.0安卓版
詳情