模板無憂
網頁特效
每日更新
|
TOP排行榜
|
Tag標簽
|
充值
無憂首頁
網頁模板
程序模板
建站教程
視頻教程
網頁特效
圖標素材
字體下載
站長工具
站長問答
網頁特效
菜單導航
圖片特效
文本鏈接
層和布局
頁面背景
表單按鈕
日期時間
計算轉換
鍵盤鼠標
瀏覽器
游戲娛樂
綜合其它
常用代碼
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在線編輯器
Mootools
HTML
JS廣告代碼合集
站長工具
站長常用軟件
網站綜合查詢
Alexa排名查詢
Google PR查詢
域名Whois查詢
網站收錄查詢
友情鏈接查詢
CSS2中文手冊
CSS精簡優化工具
網頁特效代碼
模板無憂
>
網頁特效
>
菜單導航特效代碼
>
收藏
分享
查看評論
菜單導航
演示
最簡潔的仿QQ折疊菜單的實現_菜單導航特效
查看演示效果
特效Tag:
折疊菜單
添加
最簡潔的仿QQ折疊菜單的實現,學習編寫折疊菜單的好示例,自己把CSS美化一下,還是不錯的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>最簡潔的仿QQ折疊菜單的實現</title> <meta http-equiv="mrc-type" mrc="text/html;charset=gb2312"> <style type="text/css"> .hide{display:none;} .show{display:block;} .pointer{cursor:pointer;} </style> </head> <body> <table id="menu" width="200" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000"> <!--Begin #--> <tr class="pointer" onclick="Menu(this);"> <td height="28" align="center"> <table width="150" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td>模板無憂</td> </tr> </table> </td> </tr> <tr class="show"> <td align="center" valign="top"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr><td align="center">最新更新</td></tr> <tr> <td align="center">下載排行</td></tr> </table> </td> </tr> <!--End #--> <!--Begin #--> <tr class="pointer" onclick="Menu(this);"> <td align="center"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td>ASP源碼</td> </tr> </table> </td> </tr> <tr class="hide"> <td align="center" valign="top"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center">新聞文章</td></tr> <tr><td align="center">論壇社區</td></tr> </table> </td> </tr> <!--End #--> <!--Begin #--> <tr class="pointer" onclick="Menu(this);"> <td align="center" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td>PHP源碼</td> </tr> </table> </td> </tr> <tr class="hide"> <td align="center" valign="top"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center">Ajax相關</td></tr><tr><td align="center">聊天留言</td></tr> </table> </td> </tr> <!--End #--> <!--Begin #--> <tr class="pointer" onclick="Menu(this);"> <td align="center"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td>菜單四</td> </tr> </table> </td> </tr> <tr class="hide"> <td align="center" valign="top"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center">菜單四內容一</td> </tr> <tr> <td align="center">菜單四內容二</td> </tr> </table> </td> </tr> <!--End #--> </table> <script language="javascript"> function Menu(obj) { var tb=document.getElementById("menu"); for(i=0;i<8;i++) { if(i % 2 ==1) { tb.rows[i].className="hide"; } } if(obj.className="pointer" ) { if(tb.rows(obj.rowIndex+1).className=="show") { tb.rows(obj.rowIndex+1).className="hide"; } else { tb.rows(obj.rowIndex+1).className="show"; } } } </script> </body> </html>
所屬頻道:
菜單導航特效
/
更新時間:2010-05-22
[收藏]
[報錯]
[返回列表]
相關
菜單導航特效
:
CSS+div+js組合強大實現超酷菜單
超酷仿GOOGLE首頁導航菜單效果
仿網易的滑動門技術DIV+CSS實現
仿藍色理想網站的導航菜單
鼠標觸及帶邊框菜單
用JS實現的類似框架的鏈接導航模式
CSS立體層
右鍵彈出菜單
純css的導航下拉菜單
隱藏菜單效果
css模擬title和alt的提示效果
下拉菜單鏈接頁面打開方式選擇
菜單導航特效Rss訂閱
特效代碼搜索
菜單導航特效推薦
分兩個等級的下拉菜單
仿QQ導航菜單
清新兼容性好的水平CSS菜單
鼠標滑過放大菜單項的仿FLASH菜單
來自GG網站的超酷JS導航代碼
不使用圖片仿Windows右鍵菜單
同一個網頁布局滑動門和TAB修正版
純JavaScript三級動畫菜單
標簽在左側的CSS豎向簡潔選項卡
下拉菜單,點擊后拉出,而非滑過
猜你也喜歡看這些
鼠標經過圖片由灰色變彩色
圖像大小選樣式
CSS強制圖片自適應寬度大小
動態的Loading文字,逐個變大
圖片旋轉構成3D圓環的展示特效
點擊圖片,把圖片放大,最簡單的實現方法
從兩側向中間拼合的JavaScript圖片切換效果
簡單的圖片陰影效果
Javascript 仿Flash圖片輪翻
一行代碼解決圖片放大小圖的功能
相關鏈接:
復制本頁鏈接
|
搜索最簡潔的仿QQ折疊菜單的實現
特效說明:
菜單導航模板
-
最簡潔的仿QQ折疊菜單的實現
。