代码简介：
蓝色理想网站相信大家都知道吧，她是一个注重设计的网站，这款菜单就是模仿蓝色理想网站的，一种奇特的选项卡式的导航条，从功能上来说，类似二级导航菜单，操作体验极舒服。它没有过多使用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>
<title>蓝色理想网选项卡样式的导航条代码_网页代码站(www.webdm.cn)</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);" _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="content"><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="content"><a href="http://www.webdm.cn" _fcksavedurl="#">技术文档一</a> <a href="/" _fcksavedurl="/">技术文档二</a> <a href="#"
_fcksavedurl="#">技术文档三</a> <a href="#" _fcksavedurl="#">技术文档四</a></td>
</tr>
<tr id="menu3" style="display:none;">
<td class="content"><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="content"><a href="#" _fcksavedurl="/">摄影摄像一</a> <a href="#" _fcksavedurl="#">摄影摄像二</a> <a href="#" _fcksavedurl="#">
摄影摄像三</a></td>
</tr>
<tr id="menu5" style="display:none;">
<td class="content"><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="content"><a href="#" _fcksavedurl="#">资源下载一</a> <a href="#" _fcksavedurl="#">资源下载二</a> <a href="#" _fcksavedurl="/">
资源下载三</a> <a href="http://codefans.net" _fcksavedurl="#">资源下载四</a></td>
</tr>
<tr id="menu7" style="display:none;">
<td class="content"><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="content"><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="content"><a href="#" _fcksavedurl="#">专题一</a> <a href="/" _fcksavedurl="#">专题二</a> <a href="#" _fcksavedurl="#">专题三
</a> <a href="#" _fcksavedurl="#">专题四</a> <a href="#" _fcksavedurl="#">专题五</a> <a href="http://www.webdm.cn" _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="content"><a href="#" _fcksavedurl="#">经典论坛一</a> <a href="/" _fcksavedurl="/">经典论坛二</a> <a href="http://www.webdm.cn"
_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>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
代码来自：http://www.webdm.cn/webcode/3a1d8f14-9fc1-46fc-9f1c-a701838924eb.html