模板無憂
網頁特效
每日更新
|
TOP排行榜
|
Tag標簽
|
充值
無憂首頁
網頁模板
程序模板
建站教程
視頻教程
網頁特效
圖標素材
字體下載
站長工具
站長問答
網頁特效
菜單導航
圖片特效
文本鏈接
層和布局
頁面背景
表單按鈕
日期時間
計算轉換
鍵盤鼠標
瀏覽器
游戲娛樂
綜合其它
常用代碼
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在線編輯器
Mootools
HTML
JS廣告代碼合集
站長工具
站長常用軟件
網站綜合查詢
Alexa排名查詢
Google PR查詢
域名Whois查詢
網站收錄查詢
友情鏈接查詢
CSS2中文手冊
CSS精簡優化工具
網頁特效代碼
模板無憂
>
網頁特效
>
菜單導航特效代碼
>
收藏
分享
查看評論
菜單導航
演示
下滑菜單_菜單導航特效
查看演示效果
特效Tag：
菜單
添加
下滑菜單,您可以先修改部分代碼再運行.
<html> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312"> <meta name="GENERATOR" mrc="Microsoft FrontPage 4.0"> <meta name="ProgId" mrc="FrontPage.Editor.Document"> <title>下滑菜單－模板無憂www.wf0088.com</title> <style type="text/css"> .menubar{position:absolute;top:10px;width:100px;height:20px;cursor:default;border-width:1px;border-style:outset;color:yellow;background:#0099cc} .menu{position:absolute;top:30px;width:140px;display:none;border-width:2px;border-style:outset;border-color:white sliver sliver white;background:yellow;padding:15px} .menu A{text-decoration:none;color:blue} .menu A:hover{color:#00ffff} </style> <script language="javascript"> function menuControl(show) { window.event.cancelBubble=true; var objID=event.srcElement.id; var index=objID.indexOf("_"); var mainID=objID.substring(0,index); var numID=objID.substring(index+1,objID.length); if(mainID=="menubar") { if(show==1) { eval("showMenu("+"menu_"+numID+")"); } else { eval("hideMenu("+"menu_"+numID+")"); } } } var nbottom=0,speed=1; function displayMenu(obj) { obj.style.clip="rect(0 100% "+nbottom+"% 0)"; nbottom+=speed; if(nbottom<=100) { timerID=setTimeout("displayMenu("+obj.id+"),70"); } else clearTimeout(timerID); } function showMenu(obj) { obj.style.display="block"; obj.style.clip="rect(0 0 0 0)"; nbottom=5; displayMenu(obj); } function hideMenu(obj) { nbottom=0; obj.style.display="none"; } function keepMenu(obj) { obj.style.display="block"; } </script> </head> <body> <table border="0" width="400" cellspacing="0" cellpadding="0" style="font-size:15px"> <tr> <td width="20%"> <div align="center"id="menubar_1" class="menubar" onmouseover="menuControl(1)" onmouseout="menuControl(0)"> 教育網站 </div> </td> <td width="20%"> <div align="center"id="menubar_2" class="menubar" onmouseover="menuControl(1)" onmouseout="menuControl(0)"> 電腦網站 </div> </td> <td width="20%"> <div align="center"id="menubar_3" class="menubar" onmouseover="menuControl(1)" onmouseout="menuControl(0)"> 免費郵件 </div> </td> <td width="20%"> <div align="center"id="menubar_4" class="menubar" onmouseover="menuControl(1)" onmouseout="menuControl(0)"> 其它網站 </div> </td> </tr> <tr> <td width="20%"> <div align="left"id="menu_1" class="menu" onmouseover="keepMenu(this)" onmouseout="hideMenu(this)"> <a >重慶民政學校</a><br> <a >重慶大學</a><br> <a >重慶交通學院</a> </div> </td> <td width="20%"> <div align="left"id="menu_2" class="menu" onmouseover="keepMenu(this)" onmouseout="hideMenu(this)"> <a >天極網</a><br> <a >電腦愛好者</a><br> <a >上網雜志</a> </div> </td> <td width="20%"> <div align="left"id="menu_3" class="menu" onmouseover="keepMenu(this)" onmouseout="hideMenu(this)"> <a >163電子郵件</a><br> <a >首都在線</a><br> <a >21CN電子郵件</a><br> <a >炎皇在線</a> </div> </td> <td width="20%"> <div align="left"id="menu_4" class="menu" onmouseover="keepMenu(this)" onmouseout="hideMenu(this)"> <a >搜狐</a><br> <a >雅虎</a><br> <a >搜索客</a><br> <a >新浪網</a><br> <a href="httP;//www.cqcas.edu.cn/user/sailing">遠航網站</a> </div> </td> </tr> </table> </body> </html> </script>
所屬頻道：
菜單導航特效
/
更新時間：2010-05-23
[收藏]
[報錯]
[返回列表]
相關
菜單導航特效
：
CSS+div+js組合強大實現超酷菜單
超酷仿GOOGLE首頁導航菜單效果
仿網易的滑動門技術DIV+CSS實現
仿藍色理想網站的導航菜單
鼠標觸及帶邊框菜單
用JS實現的類似框架的鏈接導航模式
CSS立體層
右鍵彈出菜單
純css的導航下拉菜單
隱藏菜單效果
css模擬title和alt的提示效果
下拉菜單鏈接頁面打開方式選擇
菜單導航特效Rss訂閱
特效代碼搜索
菜單導航特效推薦
菜單項中間用斜線分開的CSS導航條
CSS實現的三級菜單代碼
JS仿QQ的展開/折疊菜單
Js打造層拖動實例：網站菜單拖拽移位效果
純CSS標準型下拉菜單
JS折疊菜單
windows XP左側的菜單效果
類似門戶網站的CSS雙行導航菜單
仿淘寶支付寶網站的漂亮導航菜單
仿QQ導航菜單
猜你也喜歡看這些
JS實現鼠標懸停圖片交換
在圖片上單擊獲取圖片原始大小
圖片震動
禮花背景：深隧的天空不斷爆出多彩的禮花
JavaScript 生成彈性透明的圖片放大代碼
騰訊QQ網站的Js圖片切換
CSS+JavaScript仿FLASH的圖片輪換效果
根據鼠標放上切換內容制作的圖片導航
鼠標點擊效果
很有意思的圖片分裂復制效果
相關鏈接：
復制本頁鏈接
|
搜索下滑菜單
特效說明：
菜單導航模板
-
下滑菜單
。
。