模板无忧
网页特效
每日更新
|
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折叠菜单的实现
。
。。