资源管理器风格的动态菜单

Cirkadia

3.67/5 (3投票s)

2001年5月29日

5分钟阅读

131771

2518

如何为 IE 4.0+ NS6.0+ 创建 Explorer 风格的菜单，同时在旧浏览器中也能良好降级。

下载源文件 - 26 Kb

前言

我们为自己的网站导航设计并开发了 iNavigate。我们想要一种动态的方法，既能保持搜索引擎兼容性，又能很好地兼容旧浏览器。在过去的一年里，我们对菜单进行了大量的改进，并在本月（2001 年 5 月）完全增加了 NS 6.0 的动态支持。

本文旨在概述 iNavigate（以及您可以从上方链接下载的完整功能代码示例），并向您展示将 Explorer 风格菜单添加到您的网站或应用程序所需的步骤。

支持哪些浏览器？

iNavigate 动态菜单在以下浏览器中启用：

Internet Explorer 4.0+
Internet Explorer 6.0 beta
Netscape 6.0+
Mozilla 0.9 & 其他 Gecko 驱动的浏览器

对于旧版和其他浏览器，如 6.0 之前的多个 NS 版本、Opera 等，菜单结构将以展开状态显示。

Explorer 风格菜单是如何工作的？

Explorer 风格菜单通过设置 CSS Display 属性来动态打开或关闭。

菜单结构的组件通过通用的 ID 属性进行识别，然后在 JavaScript 代码中进行操作并绑定到事件处理程序。这种方法可以在其他或旧版浏览器上实现优雅降级，同时在支持的浏览器上使菜单栩栩如生。

菜单结构在页面之间的状态通过 自定义属性和会话 Cookie 来持久化。

JavaScript 代码会查找菜单结构中指向当前页面的链接，动态修改 HTML，将链接转换为文本并添加高亮。JavaScript 代码还会确保包含当前页面的菜单是展开的，这样即使关闭了会话 Cookie，用户的位置仍然可以显示。

垂直线平铺到表格背景上，多余的垂直尾部被一个拉伸并相对定位的单像素图形覆盖。

这种方法的优势是什么？

单一 HTML 源文件 - 菜单 HTML 在每个页面上都是相同的，iNavigate 会自动查找与当前页面匹配的菜单项并高亮显示。
状态持久化 - 在您浏览网站时，菜单会保持打开或关闭状态，iNavigate 使用会话 Cookie 存储状态并在下一页自动恢复它们。
优雅降级 - iNavigate 菜单从真实的 HTML 开始，因此菜单始终以展开状态呈现，兼容其他旧版浏览器（包括 Netscape 4.x 和 Opera）或在禁用 JavaScript 的情况下。许多其他菜单系统要么无法运行，要么根本就是空白的。
服务器应用程序兼容性 - 后端服务器应用程序通常使用特定的 URL 和查询字符串结构进行路由和通信。iNavigate 使您能够完全灵活地使用字符串或正则表达式来识别相应的菜单项。
子页面支持 - 如果菜单结构中存在子页面，您仍然可以让 iNavigate 识别并高亮显示菜单中的父页面。妙处在于，您无需将每个子页面都包含在菜单结构中！
菜单组支持 - 您的网站上可以有多个菜单结构实例，例如在不同的标签区域，就像我们在自己的网站上一样。
多个入口点 - 访问者可以从任何页面进入您的网站，iNavigate 会显示正确的菜单项。非常适合书签页、外部链接和搜索引擎！
搜索引擎兼容 - 由于菜单结构最初是真实的 HTML，搜索引擎可以识别菜单项中的链接。而 JavaScript 驱动的系统生成的链接对搜索引擎来说是不存在的。
无框架依赖 - 真实的 HTML 方法也意味着您不受限于使用框架，不像服务器端组件和大多数 JavaScript 驱动的解决方案。
自动文本字体/大小调整 - iNavigate 的设计能够自动适应文本字体和大小的更改，并保持图形正确对齐。
100% 客户端处理 - 除了常规的 HTTP 页面下载外，不需要组件或插件下载，也不需要任何服务器交互。

如何将 Explorer 风格菜单添加到我的网站？

有 5 个简单的步骤可以将 iNavigate 菜单定制到您的 HTML 页面中

将 iNavigate.css 文件中的 iNavigate 类添加到您自己的样式表中 - 在这里您可以更改颜色、字体大小以匹配您的网站。

.iNavigateSpanLevel1
{
    COLOR: #003366; 
    FONT-WEIGHT: bold
}

.iNavigateSpanLevel1 A:link
{
    COLOR: #003366
}

.iNavigateSpanLevel1 A:visited
{
    COLOR: #003366
}

.iNavigateSpanLevel1 A:hover
{
    COLOR: #800000;
    TEXT-DECORATION: underline
}

.iNavigateSpanLevel2
{
    COLOR: #003366;
    DISPLAY: block
}

.iNavigateSpanLevel2 A:link
{
    COLOR: #003366
}

.iNavigateSpanLevel2 A:visited
{
    COLOR: #003366
}

.iNavigateSpanLevel2 A:hover
{
    COLOR: #800000;
    TEXT-DECORATION: underline
}

.iNavigateCurrentPage
{
    COLOR: #800000;
    FONT-STYLE: normal
}

.iNavigateVLineTailCover
{
    POSITION: relative; 
    LEFT: 14px; 
    TOP: -6px
}

添加调用

iNavigate_BeforeLoad()，该函数分析菜单结构以设置和恢复菜单状态。这需要在文档结构被解析后、加载完成之前调用，即在菜单 HTML 之后的 JavaScript 中。

iNavigate_AfterLoad()，该函数分析菜单结构以设置和恢复菜单状态。这需要在文档加载完成后调用，即在 BODY 标签的 onLoad 事件中。

构建您自己的菜单结构并将其复制到每个页面 - 在这里您可以添加菜单项以及它们链接到的 HTML 页面。

NOTE: Use sample code downloaded, as the alignment used here will disrupt menu operation on some browsers.

<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" onLoad="iNavigate_AfterLoad()">

<table border="0" cellpadding="0" cellspacing="0" ">
    
    <tr>

    <td width="10"><img src="iNavigate/graphics/blank.gif" width="7" height="1"></td>

    <td valign="top" >
    <!------------------------ iNavigate MENU START -------->
    <script language="JavaScript1.2" src="iNavigate/jscript/iNavigate.js"></script>
    
    <!------------------------ iNavigate MENU CONFIG ------->
    

    <!------------------------ iNavigate LEVEL 2 Only --->
    <span id="iNavigateSpanLevel1" class="iNavigateSpanLevel1">
    <img src="iNavigate/graphics/blank.gif" width="9" height="9" border="0">
    <img src="iNavigate/graphics/squareblank.gif" width="16" height="15"><nobr>iNavigate</nobr><br>
    
    <span id="iNavigateSpanLevel2" class="iNavigateSpanLevel2">
    <table border="0" cellpadding="0" cellspacing="0" background="iNavigate/graphics/vline.gif">
        <tr><td>
        <img src="iNavigate/graphics/blank.gif" width="9" height="9" border="0">
        <img src="iNavigate/graphics/hline.gif" width="16" height="5">
        <a id="iNavigateItemLevel2" href="features.htm"><nobr>Features</nobr></a><br>
        <img src="iNavigate/graphics/blank.gif" width="9" height="9" border="0">
        <img src="iNavigate/graphics/hline.gif" width="16" height="5">
        <a id="iNavigateItemLevel2" href="technology.htm"><nobr>Technology</nobr></a><br>
        </td></tr>
    </table>
    <span class="iNavigateVLineTailCover"><img src="iNavigate/graphics/menupixel.gif" height="6" width="1" border="0"></span><br>
    </span>
    </span>

    <!------------------------ iNavigate LEVEL 1 Only --->
    <span id="iNavigateSpanLevel1" class="iNavigateSpanLevel1">

    <img src="iNavigate/graphics/blank.gif" width="9" height="9" border="0">
    <img src="iNavigate/graphics/squareblank.gif" width="16" height="15">
    <a id="iNavigateItemLevel1" href="license.htm"><nobr>License</nobr></a><br>
    </span>
    
    
    <!------------------------ iNavigate MENU ACTIVATION --->
    <script language="JavaScript1.2">iNavigate_BeforeLoad();</script>

    <!------------------------ iNavigate MENU END ---------->
    </td>

    <td width="10"><img src="iNavigate/graphics/blank.gif" width="7" height="1"></td>
    <td width="1" bgcolor="#808080"><img src="iNavigate/graphics/blank.gif" width="1" height="1"></td>
    <td width="10"><img src="iNavigate/graphics/blank.gif" width="7" height="1"></td>

    <td valign="top" width="650">

    <!------------------------ CONTENT START --------------->
    Your content here...

    <!------------------------ CONTENT END ----------------->
    </td>

    <td width="10"><img src="iNavigate/graphics/blank.gif" width="7" height="1"></td>
    <td width="1" bgcolor="#808080"><img src="iNavigate/graphics/blank.gif" width="1" height="1"></td>
    </tr>
</table>

</body>
</html>

如果您的主页不是 'index.htm'，请使用（菜单配置部分中的）iNavigate_SetHomePage 来告知 iNavigate 其文件名，以便当 URL 仅仅是您的域名时能够被识别，例如
```
<script language= "JavaScript1.2">iNavigate_SetHomePage('Home.html');</script>
```
如果您的网站没有白色背景，您需要编辑两个图形以匹配您的背景：vline.gif 和 menupixel.gif。请注意，vline.gif 不提供透明背景，因为 Netscape 4.x 对透明背景的渲染存在 bug。

对于一个基础网站来说，就这些了。

自定义

有关更精细的控制，请查看下载样本中的“定制”部分。