- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
蓝色理想网站相信大家都知道吧，她是一个注重设计的网站，这款菜单就是模仿蓝色理想网站的，一种奇异的选项卡式的导航条，从功能上来说，类似二级导航菜单，操纵体验极舒服。它没有过多使用CSS，因此对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> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" /> <title>仿蓝色理想网站选项卡式的导航条-codefans.Net</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;} .mrc{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);" _fcksavedurl="javascript:showdh(1);">业界动态</a></div></td> <td width="6"></td> <td width="86" class="unsel" id="dh2"><div align="center"><a href="javascript:showdh(2);" _fcksavedurl="javascript:showdh(2);">技术文档</a></div></td> <td width="6"></td> <td width="86" class="unsel" id="dh3"><div align="center"><a href="javascript:showdh(3);" _fcksavedurl="javascript:showdh(3);">艺术设计</a></div></td> <td width="6"></td> <td width="86" class="unsel" id="dh4"><div align="center"><a href="javascript:showdh(4);" _fcksavedurl="javascript:showdh(4);">摄影摄像</a></div></td> <td width="6"></td> <td width="86" class="unsel" id="dh5"><div align="center"><a href="javascript:showdh(5);" _fcksavedurl="javascript:showdh(5);">计算机技术</a></div></td> <td width="6"></td> <td width="86" class="unsel" id="dh6"><div align="center"><a href="javascript:showdh(6);" _fcksavedurl="javascript:showdh(6);">资源下载</a></div></td> <td width="6"></td> <td width="86" class="unsel" id="dh7"><div align="center"><a href="javascript:showdh(7);" _fcksavedurl="javascript:showdh(7);">个人专档</a></div></td> <td width="6"></td> <td width="86" class="unsel" id="dh8"><div align="center"><a href="javascript:showdh(8);" _fcksavedurl="javascript:showdh(8);">CG绘画</a></div></td> <td width="6"></td> <td width="86" class="unsel" id="dh9"><div align="center"><a href="javascript:showdh(9);" _fcksavedurl="javascript:showdh(9);">专题</a></div></td> <td width="6"></td> <td width="87" class="sel" id="dh10"><div align="center"><a href="javascript:showdh(10);" _fcksavedurl="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"></td> <td width="6"></td> <td width="86" id="line2"></td> <td width="6"></td> <td width="86" id="line3"></td> <td width="6"></td> <td width="86" id="line4"></td> <td width="6"></td> <td width="86" id="line5"></td> <td width="6"></td> <td width="86" id="line6"></td> <td width="6"></td> <td width="86" id="line7"></td> <td width="6"></td> <td width="86" id="line8"></td> <td width="6"></td> <td width="86" id="line9"></td> <td width="6"></td> <td width="87" id="line10"></td> </tr> </table> <table width="915" border="0" align="center" cellpadding="0" cellspacing="0"> <tr id="menu1" style="display:none"> <td class="mrc"><a href="/" _fcksavedurl="#">业界动态一</a> <a href="#" _fcksavedurl="/">业界动态二</a> <a href="/" _fcksavedurl="#">业界动态三</a> <a href="/" _fcksavedurl="#">业界动态四</a> <a href="#" _fcksavedurl="#">业界动态五</a> <a href="#" _fcksavedurl="#">业界动态六</a> <a href="javascript:showdh(3);" _fcksavedurl="javascript:showdh(3);">业界动态七</a></td> </tr> <tr id="menu2" style="display:none;"> <td class="mrc"><a href="/" _fcksavedurl="#">技术文档一</a> <a href="/" _fcksavedurl="/">技术文档二</a> <a href="#" _fcksavedurl="#">技术文档三</a> <a href="#" _fcksavedurl="#">技术文档四</a></td> </tr> <tr id="menu3" style="display:none;"> <td class="mrc"><a href="#" _fcksavedurl="#">艺术设计一</a> <a href="/" _fcksavedurl="/">艺术设计二</a> <a href="#" _fcksavedurl="/">艺术设计三</a> <a href="#" _fcksavedurl="#">艺术设计四</a> <a href="/" _fcksavedurl="#">艺术设计五</a> <a href="#" _fcksavedurl="#">艺术设计六</a></td> </tr> <tr id="menu4" style="display:none;"> <td class="mrc"><a href="#" _fcksavedurl="/">摄影摄像一</a> <a href="#" _fcksavedurl="#">摄影摄像二</a> <a href="#" _fcksavedurl="#">摄影摄像三</a></td> </tr> <tr id="menu5" style="display:none;"> <td class="mrc"><a href="#" _fcksavedurl="#">计算机技术一</a> <a href="#" _fcksavedurl="#">计算机技术二</a> <a href="#" _fcksavedurl="#">计算机技术三</a> <a href="/" _fcksavedurl="#">计算机技术四</a> <a href="#" _fcksavedurl="#">计算机技术五</a> <a href="#" _fcksavedurl="#">计算机技术六</a> <a href="#" _fcksavedurl="#">计算机技术七</a> <a href="#" _fcksavedurl="#">计算机技术八</a></td> </tr> <tr id="menu6" style="display:none;"> <td class="mrc"><a href="#" _fcksavedurl="#">资源下载一</a> <a href="#" _fcksavedurl="#">资源下载二</a> <a href="#" _fcksavedurl="/">资源下载三</a> <a href="http://mb5u.com" _fcksavedurl="#">资源下载四</a></td> </tr> <tr id="menu7" style="display:none;"> <td class="mrc"><a href="#" _fcksavedurl="#">个人专档一</a> <a href="#" _fcksavedurl="#">个人专档二</a> <a href="#" _fcksavedurl="#">个人专档三</a> <a href="#" _fcksavedurl="#">个人专档四</a> <a href="#" _fcksavedurl="#">个人专档五</a> <a href="#" _fcksavedurl="#">个人专档六</a> <a href="#" _fcksavedurl="#">个人专档七</a> <a href="#" _fcksavedurl="#">个人专档八</a></td> </tr> <tr id="menu8" style="display:none;"> <td class="mrc"><a href="#" _fcksavedurl="/">CG绘画一</a> <a href="#" _fcksavedurl="#">CG绘画二</a> <a href="#" _fcksavedurl="#">CG绘画三</a> <a href="#" _fcksavedurl="#">CG绘画四</a> <a href="#" _fcksavedurl="#">CG绘画五</a></td> </tr> <tr id="menu9" style="display:none;"> <td class="mrc"><a href="#" _fcksavedurl="#">专题一</a> <a href="/" _fcksavedurl="#">专题二</a> <a href="#" _fcksavedurl="#">专题三</a> <a href="#" _fcksavedurl="#">专题四</a> <a href="#" _fcksavedurl="#">专题五</a> <a href="http://mb5u.com" _fcksavedurl="/">专题六</a> <a href="#" _fcksavedurl="#">专题七</a> <a href="#" _fcksavedurl="#">专题八</a> <a href="#" _fcksavedurl="#">专题九</a> <a href="#" _fcksavedurl="#">专题十二</a> <a href="#" _fcksavedurl="#">专题十三</a></td> </tr> <tr id="menu10" style="display:none;"> <td class="mrc"><a href="#" _fcksavedurl="#">经典论坛一</a> <a href="/" _fcksavedurl="/">经典论坛二</a> <a href="http://mb5u.com" _fcksavedurl="#">经典论坛三</a> <a href="#" _fcksavedurl="#">经典论坛五</a> <a href="/" _fcksavedurl="#">经典论坛六</a></td> </tr></table> <table width="915" border="0" cellspacing="0" cellpadding="0"><tr></tr> </table> </body> </html>