模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
用JS实现的类似框架的链接导航模式_菜单导航特效
查看演示效果
特效Tag：
框架
模式
添加
用JS实现的类似框架的链接导航模式,您可以先修改部分代码再运行.
<html> <head> <meta http-equiv="Content-Language" mrc="zh-cn"> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312"> <title>用JS实现的类似框架的链接导航模式</title> <SCRIPT language=JavaScript> function secBoard(n) { for(i=1;i<6;i++) { eval("document.getElementById('cel"+i+"').style.background=''"); } eval("document.getElementById('cel"+n+"').style.background='CCCCCC'"); for(i=1;i<6;i++) eval("tbx0"+i+".style.display='none'"); eval("tbx0"+n+".style.display='block'"); } </SCRIPT> </head> <body> <div align="center"> <table border="0" width="600" cellpadding="0" style="border-collapse: collapse" id="table1"> <tr> <td width="93" height="125" align="center" valign="top"> <table border="0" width="100%" cellpadding="2" id="table28"> <tr> <td valign="top"> <div align="center"> <table border="1" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#FF0000" id="table29"> <tr> <td id=cel1 onclick=secBoard(1) style="cursor:hand" height="25" align="center">链接1</td> </tr> <tr> <td id=cel2 onclick=secBoard(2) style="cursor:hand" height="25" align="center">链接2</td> </tr> <tr> <td id=cel3 onclick=secBoard(3) style="cursor:hand" height="25" align="center">链接3</td> </tr> <tr> <td id=cel4 onclick=secBoard(4) style="cursor:hand" height="25" align="center">链接4</td> </tr> <tr> <td id=cel5 onclick=secBoard(5) style="cursor:hand" height="25" align="center">链接5</td> </tr> </table> </div> </td> </tr> </table> </td> <td valign="top"> <table border="0" width="100%" cellpadding="2" id="table2"> <tr> <td> <div align="center"> <table border="1" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#0000FF" id="table3"> <tr> <td valign="top"><TABLE id=Table27 cellSpacing=0 cellPadding=0 width=300 border=0> <TBODY> <TR> <TD width=1 bgColor=#a9a9a9 height="1"></TD> <TD class=p2 width=298 bgcolor="#CCCCCC" height="1"></TD></TR> <TR> <TD width=1><BR></TD> <TD class=p2 width=298> <TABLE id=tbx01 style="DISPLAY: block" cellSpacing=5 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR> <TD class=p2> <p style="line-height: 150%"> <font color="#FF0000"><b>链接1的内容：</b></font>酒水 香烟 鲁菜 东北 官府 湘菜 苏菜 陕西 <BR>湖北 淮扬 西餐 酒水 香烟 鲁菜 东北 官府 湘菜 苏菜 陕西 <BR>湖北 淮扬 西餐酒水 香烟 鲁菜 东北 官府 湘菜 苏菜 陕西 <BR>湖北 淮扬 西餐酒水 香烟 鲁菜 东北 官府 湘菜 苏菜 陕西 <BR>湖北 淮扬 西餐</TD></TR></TBODY></TABLE> <TABLE id=tbx02 style="DISPLAY: none" cellSpacing=5 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR> <TD class=p2> <p style="line-height: 150%"> <font color="#FF0000"><b>链接2的内容：</b></font>观前街 人民路 广济路 石路 朱家庄 西单 崇文门 <br> 苏州街 方庄 石路 朱家庄 西单 崇文门 <br> 苏州街 方庄 石路 朱家庄 西单 崇文门 <br> 苏州街 方庄 观前街 人民路 广济路 石路 朱家庄 西单 崇文门 <br> 苏州街 方庄 石路 朱家庄 西单 崇文门 <br> 苏州街 方庄 石路 朱家观前街 人民路 广济路 石路 朱家庄 西单 崇文门 <br> 苏州街 方庄 石路 朱家庄 西单 崇文门 <br> 苏州街 方庄 石路 朱家</TD></TR></TBODY></TABLE> <TABLE id=tbx03 style="DISPLAY: none" cellSpacing=5 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR> <TD class=p2> <p style="line-height: 150%"> <font color="#FF0000"><b>链接3的内容：</b></font>水煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃 <BR>鲍翅 快餐 鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤香辣蟹 火锅 羊蝎子 农家菜 烧烤鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤香辣蟹 火锅 羊蝎子 农家菜 烧烤鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤</TD></TR></TBODY></TABLE> <TABLE id=tbx04 style="DISPLAY: none" cellSpacing=5 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR> <TD class=p2> <p style="line-height: 150%"> <font color="#FF0000"><b>链接4的内容：</b></font>水煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃 <BR>鲍翅 快餐 农家菜 烧烤 小吃 <BR>鲍翅 快餐 农家菜 烧烤 小吃 <BR>鲍翅 快餐 煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃 <BR>鲍翅 快餐 农家菜 烧烤 小吃 <BR>鲍翅 快餐 农家菜 烧烤 小吃 <BR>鲍翅 快餐 </TD></TR></TBODY></TABLE> <TABLE id=tbx05 style="DISPLAY: none" cellSpacing=5 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR> <TD class=p2> <p style="line-height: 150%"> <font color="#FF0000"><b>链接5的内容：</b></font>水煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃 <BR> 鲍翅 快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐 煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃 <BR> 鲍翅 快餐快餐快餐快餐快煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃 <BR> 鲍翅 快餐快餐快餐快餐快</TD></TR></TBODY></TABLE></TD> <TD width=1><BR></TD></TR></TBODY></TABLE></td> </tr> </table> </div> </td> </tr> </table> </td> </tr> </table> </div> </body> </html>
所属频道：
菜单导航特效
/
更新时间：2010-05-23
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
：
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
跳动的菜单
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
CSS+JS黑色横向三级导航条
自动定时切换的TAB选项卡/滑动门
DIV+Css FLASH效果导航菜单
CSS竖排选项卡Tab
QQ网站的选项卡、滑动门菜单
颜色渐变的动感导航菜单
windows XP左侧的菜单效果
CSS+js实现的后台管理菜单
登陆菜单
线条型css滑动门
猜你也喜欢看这些
图片的左右移动，动画特效实现
XML动画
鼠标放到图片上会滑出提示文字
点击图片，把图片放大，最简单的实现方法
感应鼠标快速切换图片的JavaScript效果
Flickr照片分享网的图片预览特效
图片围成环形滚动，有空间感
仿淘宝星星投票，兼容性好
来自腾讯的JavaScript图片滑动
JavaScript让图片按顺序依次加载
相关链接：
复制本页链接
|
搜索用JS实现的类似框架的链接导航模式
特效说明：
菜单导航模板
-
用JS实现的类似框架的链接导航模式
。
。。