欢迎来到懒人图库！
返回首页
网站地图
懒人工具箱
返回首页
矢量
素材
矢量
代码
图标
全站
建军节
八一建军节
建军节93周年
公众号素材
七夕
七夕图片
七夕活动
七夕海报
暑期辅导班海报
防疫
首 页
电商素材
广告平面
插画配图
UI设计
专题合集
矢量素材
矢量花纹
经典实用
矢量节日
广告设计
矢量中国
矢量图标
矢量潮流
矢量标志
生活百科
矢量卡通
矢量人物
交通运输
矢量动物
矢量植物
风景建筑
食品果蔬
矢量字体
矢量背景
体育运动
其他矢量
PNG图标
128x128
256x256
512x512
32x32
48x48
64x64
JS代码
焦 点 图
全屏广告
对联广告
在线客服
相册代码
菜单导航
TAB标签
悬浮漂浮
视频播放
图片特效
翻牌书角
其他代码
导航菜单
表单按钮
文字特效
表格图层
图片特效
时间日期
滚动代码
窗口特效
颜色背景
网站常用
CSS样式
其他特效
PSD素材
设计元素
网页元素
按钮素材
花纹元素
房产模板
名片模板
字体设计
图标设计
包装设计
界面设计
年历台历
中国元素
卡通素材
人物素材
生活百科
图片素材
背景图片
人物图片
静物图片
动物图片
植物花卉
美食图片
水果图片
蔬菜图片
网页素材
网页小图片
网页背景
软件分享
QQ表情
酷文分享
字体下载
用户体验
视觉设计
交互设计
广告设计
设计思想
用户研究
前端开发
产品经理
资源文档
设计分享
平面设计
包装设计
名片设计
其他艺术
广告创意
标志设计
绘画艺术
产品设计
摄影欣赏
交互设计
视频广告
懒人工具箱
当前位置：
首页
>
JS代码
>
JS特效代码
>
导航菜单
仿蓝色理想TAB横向下拉菜单效果
2009-06-05 来源/作者：懒人图库 分类：
导航菜单
«
»
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>仿经典导航菜单</title> <style type="text/css"> td{font-size:12px;} .unsel{background-color:#8c8ba1; background-position:top; background-repeat:repeat-x; color:#FFFFFF; font-weight:normal;} .sel {background-color:#666688; color:#FFFFFF; font-weight:bold;} .content{background-color:#666688; height:25px; padding-left:20px; padding-right:20px; color:#ffffff;} .lineunsel{background-color:#FFFFFF;} .linesel{background:#666688;} a:link {color:#ffffff;text-decoration:none;} a:visited {color:#ffffff;text-decoration:none;} a:active {color:#ffffff;text-decoration:none;} a:hover {color:#ffffff;text-decoration:underline;} </style> <script language="javascript"> function showdh(n){ for(var i=1;i<=10;i++){ eval("dh"+i).className="unsel" eval("line"+i).className="lineunsel"; eval("menu"+i).style.display="none"; } eval("dh"+n).className="sel" eval("line"+n).className="linesel"; eval("menu"+n).style.display=""; } </script> </head> <body onload="javascript:showdh(1);"> <table width="915" height="30" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="86" class="unsel" id="dh1"><div align="center"><a href="javascript:showdh(1);">业界动态</a></div></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td> <td width="86" class="unsel" id="dh2"><div align="center"><a href="javascript:showdh(2);">技术文档</a></div></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td> <td width="86" class="unsel" id="dh3"><div align="center"><a href="javascript:showdh(3);">艺术设计</a></div></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td> <td width="86" class="unsel" id="dh4"><div align="center"><a href="javascript:showdh(4);">摄影摄像</a></div></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td> <td width="86" class="unsel" id="dh5"><div align="center"><a href="javascript:showdh(5);">计算机技术</a></div></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td> <td width="86" class="unsel" id="dh6"><div align="center"><a href="javascript:showdh(6);">资源下载</a></div></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td> <td width="86" class="unsel" id="dh7"><div align="center"><a href="javascript:showdh(7);">个人专档</a></div></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td> <td width="86" class="unsel" id="dh8"><div align="center"><a href="javascript:showdh(8);">CG绘画</a></div></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td> <td width="86" class="unsel" id="dh9"><div align="center"><a href="javascript:showdh(9);">专题</a></div></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td> <td width="87" class="sel" id="dh10"><div align="center"><a href="javascript:showdh(10);">经典论坛</a></div></td> </tr> </table> <table width="915" height="3" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="86" height="6" id="line1"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td> <td width="86" id="line2"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td> <td width="86" id="line3"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td> <td width="86" id="line4"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td> <td width="86" id="line5"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td> <td width="86" id="line6"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td> <td width="86" id="line7"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td> <td width="86" id="line8"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td> <td width="86" id="line9"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td> <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td> <td width="87" id="line10"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td> </tr> </table> <table width="915" border="0" align="center" cellpadding="0" cellspacing="0"> <tr id="menu1" style="display:none"> <td class="content"><a href="#">业界动态一</a> <a href="#">业界动态二</a> <a href="#">业界动态三</a> <a href="#">业界动态四</a> <a href="#">业界动态五</a> <a href="#">业界动态六</a> <a href="javascript:showdh(3);">业界动态七</a></td> </tr> <tr id="menu2" style="display:none;"> <td class="content"><a href="#">技术文档一</a> <a href="#">技术文档二</a> <a href="#">技术文档三</a> <a href="#">技术文档四</a></td> </tr> <tr id="menu3" style="display:none;"> <td class="content"><a href="#">艺术设计一</a> <a href="#">艺术设计二</a> <a href="#">艺术设计三</a> <a href="#">艺术设计四</a> <a href="#">艺术设计五</a> <a href="#">艺术设计六</a></td> </tr> <tr id="menu4" style="display:none;"> <td class="content"><a href="#">摄影摄像一</a> <a href="#">摄影摄像二</a> <a href="#">摄影摄像三</a></td> </tr> <tr id="menu5" style="display:none;"> <td class="content"><a href="#">计算机技术一</a> <a href="#">计算机技术二</a> <a href="#">计算机技术三</a> <a href="#">计算机技术四</a> <a href="#">计算机技术五</a> <a href="#">计算机技术六</a> <a href="#">计算机技术七</a> <a href="#">计算机技术八</a></td> </tr> <tr id="menu6" style="display:none;"> <td class="content"><a href="#">资源下载一</a> <a href="#">资源下载二</a> <a href="#">资源下载三</a> <a href="#">资源下载四</a></td> </tr> <tr id="menu7" style="display:none;"> <td class="content"><a href="#">个人专档一</a> <a href="#">个人专档二</a> <a href="#">个人专档三</a> <a href="#">个人专档四</a> <a href="#">个人专档五</a> <a href="#">个人专档六</a> <a href="#">个人专档七</a> <a href="#">个人专档八</a></td> </tr> <tr id="menu8" style="display:none;"> <td class="content"><a href="#">CG绘画一</a> <a href="#">CG绘画二</a> <a href="#">CG绘画三</a> <a href="#">CG绘画四</a> <a href="#">CG绘画五</a></td> </tr> <tr id="menu9" style="display:none;"> <td class="content"><a href="#">专题一</a> <a href="#">专题二</a> <a href="#">专题三</a> <a href="#">专题四</a> <a href="#">专题五</a> <a href="#">专题六</a> <a href="#">专题七</a> <a href="#">专题八</a> <a href="#">专题九</a> <a href="#">专题十</a> <a href="#">专题十一</a> <a href="#">专题十二</a> <a href="#">专题十三</a></td> </tr> <tr id="menu10" style="display:none;"> <td class="content"><a href="#">经典论坛一</a> <a href="#">经典论坛二</a> <a href="#">经典论坛三</a> <a href="#">经典论坛四</a> <a href="#">经典论坛五</a> <a href="#">经典论坛六</a></td> </tr></table> <table width="915" border="0" cellspacing="0" cellpadding="0"><tr></tr> </table> <p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p> </body> </html>
运行代码
保存代码
提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。
标签：
导航菜单
相关代码推荐
jquery模仿flash导航
Tips展开关闭问答代码
2007英文网站最具流行的53种网站导航
纯div+css制作的弹出菜单-01
纯div+css制作的弹出菜单-02
纯div+css制作的弹出菜单-03
纯div+css制作的弹出菜单-04
纯div+css制作的弹出菜单-05
绿色下划线的简洁CSS导航代码
广告代码
全部››
焦 点 图
全屏广告
对联广告
在线客服
相册代码
菜单导航
TAB标签
悬浮漂浮
视频播放
图片特效
翻牌书角
其他代码
特效代码
全部››
导航菜单
表单按钮
文字特效
表格图层
图片特效
时间日期
滚动代码
窗口特效
颜色背景
网站常用
CSS样式
其他特效
猜你也喜欢看这些 ······
jQuery手风琴图片滑动效果
图片特效
2020-04-26
HTML5&SVG彩色线条文字时钟特效代码
其他代码
2020-04-26
像素方块时钟CSS3特效代码
其他代码
2020-04-26
购物网站四联CSS3图片特效代码
图片特效
2020-04-24
2021新年倒计时雪花代码
其他代码
2020-04-24
这些是最新的 ······
CSS3+JS滚动数字时钟代码
时间日期
2017-09-09
jQuery左右滚动4屏弹性焦点图代码
网站常用
2020-04-10
jQuery实现的平滑滚动选项卡
其他特效
2020-04-10
图片垂直居中不随滚动条滚动的JS代码
图片特效
2020-04-10
图片在窗口中上下左右垂直居中代码
图片特效
2020-04-10
