仿蓝色理想网站选项卡式的导航条

2024-09-05 12:19:42

字体：大中小

来源：转载

供稿：网友

蓝色理想网站相信大家都知道吧，她是一个注重设计的网站，这款菜单就是模仿蓝色理想网站的，一种奇特的选项卡式的导航条，从功能上来说，类似二级导航菜单，操作体验极舒服。它没有过多使用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" 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">业界动态</div></td><td width="6"></td><td width="86" class="unsel" id="dh2"><div align="center">技术文档</div></td><td width="6"></td><td width="86" class="unsel" id="dh3"><div align="center">艺术设计</div></td><td width="6"></td><td width="86" class="unsel" id="dh4"><div align="center">摄影摄像</div></td><td width="6"></td><td width="86" class="unsel" id="dh5"><div align="center">计算机技术</div></td><td width="6"></td><td width="86" class="unsel" id="dh6"><div align="center">资源下载</div></td><td width="6"></td><td width="86" class="unsel" id="dh7"><div align="center">个人专档</div></td><td width="6"></td><td width="86" class="unsel" id="dh8"><div align="center">CG绘画</div></td><td width="6"></td><td width="86" class="unsel" id="dh9"><div align="center">专题</div></td><td width="6"></td><td width="87" class="sel" id="dh10"><div align="center">经典论坛</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">业界动态一　　业界动态二　　业界动态三　　业界动态四　　业界动态五　　业界动态六　　业界动态七</td></tr><tr id="menu2" style="display:none;"><td  class="content">技术文档一　　技术文档二　　技术文档三　　技术文档四</td></tr><tr id="menu3" style="display:none;"><td  class="content">艺术设计一　　艺术设计二　　艺术设计三　　艺术设计四　　艺术设计五　　艺术设计六</td></tr><tr id="menu4" style="display:none;"><td  class="content">摄影摄像一　　摄影摄像二　　摄影摄像三</td></tr><tr id="menu5" style="display:none;"><td  class="content">计算机技术一　　计算机技术二　　计算机技术三　　计算机技术四　　计算机技术五　　计算机技术六　　计算机技术七　　计算机技术八</td></tr><tr id="menu6" style="display:none;"><td  class="content">资源下载一　　资源下载二　　资源下载三　　资源下载四</td></tr><tr id="menu7" style="display:none;"><td  class="content">个人专档一　　个人专档二　　个人专档三　　个人专档四　　个人专档五　　个人专档六　　个人专档七　　个人专档八</td></tr><tr id="menu8" style="display:none;"><td  class="content">CG绘画一　　CG绘画二　　CG绘画三　　CG绘画四　　CG绘画五</td></tr><tr id="menu9" style="display:none;"><td  class="content">专题一　　专题二　　专题三　　专题四　　专题五　　专题六　　专题七　　专题八　　专题九　　专题十二　　专题十三</td></tr><tr id="menu10" style="display:none;"><td  class="content">经典论坛一　　经典论坛二　经典论坛三　　经典论坛五　　经典论坛六</td></tr></table><table width="915" border="0" cellspacing="0" cellpadding="0"><tr></tr></table></body></html>

上一篇：JS仿QQ折叠菜单

下一篇：仿Windows XP风格的右键菜单