模板無憂
網(wǎng)頁特效
每日更新
|
TOP排行榜
|
Tag標簽
|
充值
無憂首頁
網(wǎng)頁模板
程序模板
建站教程
視頻教程
網(wǎng)頁特效
圖標素材
字體下載
站長工具
站長問答
網(wǎng)頁特效
菜單導航
圖片特效
文本鏈接
層和布局
頁面背景
表單按鈕
日期時間
計算轉換
鍵盤鼠標
瀏覽器
游戲娛樂
綜合其它
常用代碼
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在線編輯器
Mootools
HTML
JS廣告代碼合集
站長工具
站長常用軟件
網(wǎng)站綜合查詢
Alexa排名查詢
Google PR查詢
域名Whois查詢
網(wǎng)站收錄查詢
友情鏈接查詢
CSS2中文手冊
CSS精簡優(yōu)化工具
網(wǎng)頁特效代碼
模板無憂
>
網(wǎng)頁特效
>
菜單導航特效代碼
>
收藏
分享
查看評論
菜單導航
演示
一個不錯的下拉菜單,加上圖片后效果極好_菜單導航特效
查看演示效果
特效Tag:
菜單
效果
添加
一個不錯的下拉菜單,加上圖片后效果極好,您可以先修改部分代碼再運行.
要完成此效果需要兩個步驟 第一步:把如下代碼加入到<head>區(qū)域中 <script language="JavaScript1.2"> scores = new Array(20);var numTotal=0;NS4 = (document.layers) ? 1 : 0;IE4 = (document.all) ? 1 : 0;ver4 = (NS4 || IE4) ? 1 : 0;if (ver4) { with (document) { write("<STYLE TYPE='text/css'>"); if (NS4) { write(".parent {position:absolute; visibility:visible}"); write(".child {position:absolute; visibility:visible}"); write(".regular {position:absolute; visibility:visible}") } else { write(".child {display:none}") } write("</STYLE>"); }}function getIndex(el) { ind = null; for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id == el) { ind = i; break; } } return ind;}function arrange() { nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height; for (i=firstInd+1; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.visibility != "hide") { whichEl.pageY = nextY; nextY += whichEl.document.height; } }}function initIt(){ if (!ver4) return; if (NS4) { for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide"; } arrange(); } else { divColl = document.all.tags("DIV"); for (i=0; i<divColl.length; i++) { whichEl = divColl(i); if (whichEl.className == "child") whichEl.style.display = "none"; } }}function expandIt(el) { if (!ver4) return; if (IE4) { whichEl1 = eval(el + "Child"); for(i=1;i<=numTotal;i++){ whichEl = eval(scores[i] + "Child"); if(whichEl!=whichEl1) { whichEl.style.display = "none"; } } whichEl1 = eval(el + "Child"); if (whichEl1.style.display == "none") { whichEl1.style.display = "block"; } else { whichEl1.style.display = "none"; } } else { whichEl = eval("document." + el + "Child"); for(i=1;i<=numTotal;i++){ whichEl = eval("document." + scores[i] + "Child"); if(whichEl!=whichEl1) { whichEl.visibility = "hide"; } } if (whichEl.visibility == "hide") { whichEl.visibility = "show"; } else { whichEl.visibility = "hide"; } arrange(); }}onload = initIt; </script> 第二步:把如下代碼加入到<body>區(qū)域中 <div id='KB1Parent' class='parent'><a href="#" onClick="expandIt('KB1'); return false"> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0 width="26" height="13"><font size="2">主類一</font></a></div> <div id='KB1Child' class='child'> <font size="2"><a href='link1.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0><font face="楷體_GB2312">分類一</font></a><font face="楷體_GB2312"><br> <a href='link2.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分類二</a><br> <a href='link3.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分類三</a><br> <a href='link8.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分類四</a></font></font></div> <div id='KB2Parent' class='parent'><font size="2"><a href="#" onClick="expandIt('KB2'); return false"> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>主類二</a></font></div> <div id='KB2Child' class='child'> <font size="2"><a href='link1.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0 width="24" height="14"><font face="楷體_GB2312">分類一</font></a><font face="楷體_GB2312"><br> <a href='link9.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分類二</a><br> <a href='link10.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分類三</a><br> <a href='link11.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分類四</a> </font></font></div> <div id='KB3Parent' class='parent'><font size="2"><a href="#" onClick="expandIt('KB3'); return false"> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>主類三</a></font></div> <div id='KB3Child' class='child'> <font size="2"><a href='link1.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0><font face="楷體_GB2312">分類一</font></a><font face="楷體_GB2312"><br> <a href='link2.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分類二</a><br> <a href='link9.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分類三</a></font></font></div>
所屬頻道:
菜單導航特效
/
更新時間:2011-02-23
[收藏]
[報錯]
[返回列表]
相關
菜單導航特效
:
CSS+div+js組合強大實現(xiàn)超酷菜單
超酷仿GOOGLE首頁導航菜單效果
仿網(wǎng)易的滑動門技術DIV+CSS實現(xiàn)
仿藍色理想網(wǎng)站的導航菜單
鼠標觸及帶邊框菜單
用JS實現(xiàn)的類似框架的鏈接導航模式
CSS立體層
右鍵彈出菜單
純css的導航下拉菜單
隱藏菜單效果
css模擬title和alt的提示效果
下拉菜單鏈接頁面打開方式選擇
菜單導航特效Rss訂閱
特效代碼搜索
菜單導航特效推薦
透明度慢慢變化的豎向JS+css菜單
一個不錯的下拉菜單,加上圖片后效果極好
酷似FLASH的豎向菜單
Fisheye 動感放大的菜單
CSS之漂亮區(qū)域鏈接構成的菜單
仿網(wǎng)易漂亮的TAB選項卡(標簽)
帶箭頭指向的首頁滑動門特效代碼
像滑動門一樣的CSs菜單
鼠標滑過變色的菜單條
CSS鼠標滑動菜單
猜你也喜歡看這些
Google紀念Logo小球下落特效
點擊圖片,把圖片放大,最簡單的實現(xiàn)方法
JS圖片切換,仿水紋波動
JS圖片濾鏡自己轉換效果,焦點圖切換
改變網(wǎng)頁背景圖片
CSS將圖片自動變?yōu)閳A角
旗幟
圖形循環(huán)漸顯腳本
純CSS 漂亮的立體圖片邊框效果,陰影代碼
Js版淘寶圖片切換,類似相冊播放效果
相關鏈接:
復制本頁鏈接
|
搜索一個不錯的下拉菜單,加上圖片后效果極好
特效說明:
菜單導航模板
-
一個不錯的下拉菜單,加上圖片后效果極好
。