<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>
</body>
</html>
分享到：
相关推荐
"35个JavaScript菜单菜单样式"是一个资源包，提供了多种设计独特的菜单样式，旨在帮助开发者提升网站或应用的用户体验。 在网页设计中，菜单是一个重要的导航元素，它允许用户轻松地浏览网站的不同部分。JavaScript...
"Basic"可能是一个基础的JavaScript菜单，展示了最简单的下拉或弹出菜单的基本结构。这包括如何使用JavaScript操作DOM元素（如添加和删除class，显示和隐藏元素）以及响应用户事件。 4. **Drop Shadow** "Drop ...
在这个“javascript菜单”的主题中，我们将深入探讨如何使用JavaScript来创建和管理网页菜单。 1. **基础概念** - JavaScript: 一种解释型、跨平台的编程语言，主要在浏览器环境中运行，用于控制网页的行为。 - ...
JavaScript菜单特效能增强菜单的功能性和吸引力，提高用户的浏览体验。 首先，我们来看“二级相互关联菜单”。这种菜单通常由一个主菜单项展开，显示与其相关的子菜单项。通过JavaScript，我们可以实现点击主菜单时...
本文将深入探讨如何使用JavaScript创建树形菜单、仿QQ菜单以及折叠式菜单。 树形菜单通常用于展示层级结构的数据，比如网站的导航或文件系统。在JavaScript中，我们可以利用数组和递归函数来构建这样的结构。每个...
"CSS+JavaScript 菜单"就是这样一个技术组合，用于构建动态、响应式且功能丰富的导航元素。下面将详细讲解CSS和JavaScript在创建这种菜单中的作用，以及如何将两者结合使用。 首先，CSS（Cascading Style Sheets）...
在本主题中，我们将深入探讨“JavaScript菜单特效”的相关知识，这些特效为网站的导航菜单增添了吸引力和用户体验。 首先，菜单是任何网站的重要组成部分，它们帮助用户轻松地浏览和访问网站的不同部分。JavaScript...
JavaScript可折叠菜单是一种常见的网页交互元素，用于优化用户体验，特别是在导航栏或侧边栏中，通过折叠和展开子菜单来节省空间并保持页面整洁。在本文中，我们将深入探讨JavaScript可折叠菜单的设计与实现，以及它...
"简单的Javascript折叠菜单"就是这样一个实现方式，它允许用户通过点击来展开或折叠菜单项，从而节省页面空间，提高用户体验。 折叠菜单的基本原理是利用JavaScript事件处理和DOM（Document Object Model）操作。...
在JavaScript编程中，创建多级菜单是一个常见的需求，特别是在网页设计和开发中。这个压缩包“javascript多级菜单（三种）.rar”包含了三个不同的示例，分别使用不同的方法来实现这一功能。以下是对这三个实现方式的...
本文将深入探讨如何利用JavaScript实现各种类型的动态菜单，包括树型目录菜单、二级联动及三级联动菜单。 首先，让我们了解一下JavaScript动态菜单的基本原理。动态菜单主要通过DOM（Document Object Model）操作来...
本文将深入探讨如何使用JavaScript实现旋转导航菜单。 首先，我们需要理解基本的HTML和CSS来构建菜单的基础框架。HTML用于创建菜单的结构，而CSS负责样式和布局。例如，我们可以创建一个无序列表（`<ul>`）作为菜单...
4. **菜单项的创建与绑定**：菜单项可以通过JavaScript动态创建，例如使用`document.createElement('div')`创建一个新的`<div>`，然后设置其文本内容、样式以及点击事件处理器。 5. **阻止默认行为**：为了让自定义...
JavaScript多级联动浮动菜单是一种常见的网页交互设计，用于创建具有层次结构的导航菜单。这种菜单在用户滚动页面时会保持固定在屏幕的某个位置，提供便捷的导航。在这个项目中，我们将深入探讨JavaScript如何实现...
javascript树形菜单
JavaScript横向菜单是一种常见的网页交互设计，它通常出现在网站顶部，为用户提供导航功能。在网页设计中，这样的菜单能够帮助用户快速地浏览网站的不同部分，提高用户体验。本文将深入探讨JavaScript在实现横向菜单...
JavaScript 树形菜单是一种在网页中展示层次结构数据的有效方式，通常用于导航、目录或文件系统等场景。这种菜单以可折叠的节点形式呈现，用户可以通过展开或折叠节点来探索和交互。在JavaScript中实现树形菜单，...
在JavaScript的世界里，创建展开/折叠菜单是一种常见的交互设计，它可以增强用户在网站或应用程序中的导航体验。这个实例将向我们展示如何利用JavaScript实现这样的功能。JavaScript作为一种强大的客户端脚本语言，...
javascript实现省市级联菜单的效果