模板無憂
網頁特效
每日更新
|
TOP排行榜
|
Tag標簽
|
充值
無憂首頁
網頁模板
程序模板
建站教程
視頻教程
網頁特效
圖標素材
字體下載
站長工具
站長問答
網頁特效
菜單導航
圖片特效
文本鏈接
層和布局
頁面背景
表單按鈕
日期時間
計算轉換
鍵盤鼠標
瀏覽器
游戲娛樂
綜合其它
常用代碼
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在線編輯器
Mootools
HTML
JS廣告代碼合集
站長工具
站長常用軟件
網站綜合查詢
Alexa排名查詢
Google PR查詢
域名Whois查詢
網站收錄查詢
友情鏈接查詢
CSS2中文手冊
CSS精簡優化工具
網頁特效代碼
模板無憂
>
網頁特效
>
菜單導航特效代碼
>
收藏
分享
查看評論
菜單導航
演示
仿QQ的菜單,三級豎向_菜單導航特效
查看演示效果
特效Tag:
CSS菜單
添加
仿QQ的三級菜單,豎向三級,兩級的比較多見,三級的不多哦,不過本菜單三級菜單沒有美化,你需要自己再美化一下。
<html> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" mrc="zh-CN" /> <title>仿QQ的菜單,三級豎向</title> <script language="javascript"> function Switchmenu(obj){ if(document.getElementById){ var el = document.getElementById("menu_"+obj); var ar = document.getElementById("menu").getElementsByTagName("ul"); if(el.style.display != "block"){ for (var i=0; i<ar.length; i++){ if (ar[i].className=="submenu") ar[i].style.display = "none"; document.getElementById("menu"+(i+1)).className="menutbg_1 cursor" } el.style.display = "block"; document.getElementById("menu"+obj).className="menutbg_2 cursor" }else{ el.style.display = "none"; document.getElementById("menu"+obj).className="menutbg_1 cursor" } } } </script> <script language="javascript" id="clientEventHandlersJS"> <!-- var number=6; function LMYC() { var lbmc; for (i=1;i<=number;i++) { lbmc = eval('LM' + i); //treePic = eval('treePic'+i); //treePic.src = 'images/file.gif'; lbmc.style.display = 'none'; } } function ShowFLT(i) { lbmc = eval('LM' + i); //treePic = eval('treePic' + i) if (lbmc.style.display == 'none') { LMYC(); //treePic.src = 'images/nofile.gif'; lbmc.style.display = ''; } else { //treePic.src = 'images/file.gif'; lbmc.style.display = 'none'; } } //--> </script> <style type="text/css"> <!-- body{font-family: "宋體";font-size:12px; margin:0; padding:0;} ul{list-style-type:none; margin:0; padding:0;} li{margin:0; padding:0;} #menu{background:#fff; width:182px; height:auto;margin:0 auto; border:1px solid #73C2FF;} .cursor{cursor:pointer;} .submenu{display: none;} .menutbg_1{1122123
2244234background:url(http://p1.mb5u.com/texiao/0/2010052223050721.gif) no-repeat left; width:182px; height:25px; line-height:25px; color:#4B6486; font-size:14px; font-weight:700;text-align:left; text-indent:19px;} .menutbg_2{1122123
2244234background:url(http://p1.mb5u.com/texiao/0/2010052223050722.gif) no-repeat left; width:182px; height:25px; line-height:25px; color:#4B6486; font-size:14px; font-weight:700; text-align:left;text-indent:19px;} .mbox{background:#73C2FF;height:auto;} .mt1{font-size:14px;height:22px;line-height:22px;background:#E5F5FF;text-indent:10px;border-top: 1px solid #fff;border-bottom: 1px solid #A9DAFF; font-weight:normal;cursor:pointer;} .TxtList{height:200px; overflow-y:scroll; background:#fff;} .mt3{height:22px; line-height:22px; text-indent:33px; color:#333; font-size:12px; no-repeat 20px 5px;} </style> --> </style> </head> <body> <div id="menu"> <div id="menu1" class="menutbg_1 cursor" onclick="Switchmenu('1')">一級菜單A</div> <ul id="menu_1" class="submenu"> <table cellspacing="0" cellpadding="0" width="100%" border="0" class="mbox"> <tr> <td class="mt1"><a onclick="javascript:ShowFLT(1)" href="javascript:void(null)" style="text-decoration:none; color:#333;"> 文管產品</a> </td> </tr> <tr id="LM1" style="DISPLAY: none"> <td><div class="TxtList"> <div class="mt3"><a href="#">123213</a></div> <div class="mt3"><a href="#">123213</a></div> <div class="mt3"><a href="#">123213</a></div> <div class="mt3"><a href="3">123213</a></div> </div></td> </tr> <tr> <td class="mt1"><a onclick="javascript:ShowFLT(2)" href="javascript:void(null)" style="text-decoration:none; color:#333;"> 桌面文具</a> </td> </tr> <tr id="LM2" style="DISPLAY: none"> <td><div class="TxtList"> <div class="mt3"><a href="#">123213</a></div> <div class="mt3"><a href="#">123213</a></div> <div class="mt3"><a href="3">123213</a></div> </div></td> </tr> </table> </ul> <div id="menu2" class="menutbg_1 cursor" onclick="Switchmenu('2')">一級菜單B</div> <ul id="menu_2" class="submenu"> <table cellspacing="0" cellpadding="0" width="100%" border="0" class="mbox"> <tr> <td class="mt1"><a onclick="javascript:ShowFLT(3)" href="javascript:void(null)" style="text-decoration:none; color:#333;"> 文管產品</a> </td> </tr> <tr id="LM3" style="DISPLAY: none"> <td><div class="TxtList"> <div class="mt3"><a href="#">123213</a></div> <div class="mt3"><a href="3">123213</a></div> <div class="mt3"><a href="3">123213</a></div> <div class="mt3"><a href="#">123213</a></div> </div></td> </tr> <tr> <td class="mt1"><a onclick="javascript:ShowFLT(4)" href="javascript:void(null)" style="text-decoration:none; color:#333;"> 桌面文具</a> </td> </tr> <tr id="LM4" style="DISPLAY: none"> <td><div class="TxtList"> <div class="mt3"><a href="#">123213</a></div> <div class="mt3"><a href="#">123213</a></div> <div class="mt3"><a href="#">123213</a></div> <div class="mt3"><a href="3">123213</a></div> </div></td> </tr> </table> </ul> <div id="menu3" class="menutbg_1 cursor" onclick="Switchmenu('3')">一級菜單C</div> <ul id="menu_3" class="submenu"> <table cellspacing="0" cellpadding="0" width="100%" border="0" class="mbox"> <tr> <td class="mt1"><a onclick="javascript:ShowFLT(5)" href="javascript:void(null)" style="text-decoration:none; color:#333;"> 文管產品</a> </td> </tr> <tr id="LM5" style="DISPLAY: none"> <td><div class="TxtList"> <div class="mt3"><a href="#">123213</a></div> <div class="mt3"><a href="#">123213</a></div> <div class="mt3"><a href="#">123213</a></div> <div class="mt3"><a href="3">123213</a></div> </div></td> </tr> <tr> <td class="mt1"><a onclick="javascript:ShowFLT(6)" href="javascript:void(null)" style="text-decoration:none; color:#333;"> 桌面文具</a> </td> </tr> <tr id="LM6" style="DISPLAY: none"> <td><div class="TxtList"> <div class="mt3"><a href="#">123213</a></div> <div class="mt3"><a href="#">123213</a></div> <div class="mt3"><a href="#">123213</a></div> </div></td> </tr> </table> </ul> </div> </body> </html>
所屬頻道:
菜單導航特效
/
更新時間:2012-11-15
[收藏]
[報錯]
[返回列表]
相關
菜單導航特效
:
CSS+div+js組合強大實現超酷菜單
超酷仿GOOGLE首頁導航菜單效果
仿網易的滑動門技術DIV+CSS實現
仿藍色理想網站的導航菜單
鼠標觸及帶邊框菜單
用JS實現的類似框架的鏈接導航模式
CSS立體層
右鍵彈出菜單
純css的導航下拉菜單
隱藏菜單效果
css模擬title和alt的提示效果
下拉菜單鏈接頁面打開方式選擇
菜單導航特效Rss訂閱
特效代碼搜索
菜單導航特效推薦
鼠標劃過變陰影的CSS菜單
始終在頁面底部的菜單
桌面右鍵菜單
完全用Js輸出的Tab選項卡
淘寶支付寶網站的控制臺菜單
類似淘寶一樣的純CSS導航菜單
移動菜單
css模擬title和alt的提示效果
多瀏覽器兼容的純CSS橫向導航條
簡潔CSS導航菜單(藍色)
猜你也喜歡看這些
間隔時間自由滾動特技
仿FLASH圖片光照特效
純CSS實現的圖片滾動,見過嗎?
清爽簡潔的圖片交替導航效果
在同一頁面拖動多個圖片
圖片的翻頁效果,基于jquery的實現方法
JavaScript獲取遠程圖片大小(長度和寬度)
163游戲頻道圖片翻頁代碼
滑動條顯示 Script
圖片友情鏈接滾動,橫向,帶控制按鈕
相關鏈接:
復制本頁鏈接
|
搜索仿QQ的菜單,三級豎向
特效說明:
菜單導航模板
-
仿QQ的菜單,三級豎向
。