模板无忧
网页特效
每日更新
|
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<img src=http://p1.mb5u.com/texiao/0/2010052223050721.gif>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<img src=http://p1.mb5u.com/texiao/0/2010052223050722.gif>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的菜单，三级竖向
。
。。