下拉导航菜单的JavaScript

银海软件•2016-02-18•经验之谈•

改善你的网站导航
我们都知道，使它容易对访问者浏览一个网站的价值。在一般情况下，您的访问者是不大可能搜索您网站的每一个页面，只是为了得到他们想要的信息。如果他们不能轻易得到的信息，他们正在寻找，他们就离开现场。

有很多方法来提高导航在您的网站上。一种方法是把一个下拉导航菜单上你的网站，这是本文的主题。

对于好奇，一些其他改进你的导航方式，包括把一个网站的搜索引擎，在您的网站（http://www.thesitewizard.com/archive/searchengine.shtml）添加到您的网站是新科（HTTP :/ / www.thesitewizard.com /存档/ whatsnew.shtml的）。

重要提示：如果你正在寻找一个按钮，菜单像侧面thesitewizard.com上所看到的，你应该使用CSS菜单按钮向导，而不是在这里给出的方法。

使用JavaScript下拉菜单
一个下拉菜单通常包含在您的网站上的页面，您的访问者可以从下拉列表中选择列表。当他选择的页面，他会自动传送到相应的页面。下面的一个例子，可以发现这样一个下拉菜单。请注意，这个例子菜单仅仅是一个虚拟的菜单：它实际上并没有工作 - 它在这里告诉你的菜单看起来像。

下拉菜单示例（只显示）：-----选择页-----首页的JavaScript教程----其他----免费脚本
得到这样的菜单为您的网站的最简单的方法是根据您的要求为您的网站创建一个自定义菜单，使用thesitewizard的导航菜单向导。或者，您可以阅读这篇文章，其中介绍了如何构建这样的菜单。

构建你的下拉菜单
你需要的下拉导航菜单的第一件事是把下面的JavaScript函数的地方在你的网页之前，实际的菜单本身。例如，你可以把它您的文档<head>部分，或者如果你愿意，请立即下拉菜单本身之前（见下文）。

现在language="javascript"的type="text/javascript">
<！ -
功能menu_goto（menuform）
{
    / / http://www.thesitewizard.com/archive/navigation.shtml
    / /该脚本解释，以及如何使用它在你的
    / /自己的网站

    VAR baseURL时=“http://www.put-your-domain-name-here.com”;
    的SelectedItem menuform.newurl.selectedIndex;
    的newURL = menuform.newurl.options的SelectedItem]。价值;
    如果（的newurl.length！= 0）{
      LOCATION.HREF = BASEURL +的newURL;
    }
}
/ / - >
</ SCRIPT>
函数接受一个参数 - 表单对象。然后，它从对象的选定值进行提取，并从该URL加载页面。

请改变“BASEURL”的上面给出您的网站的域名。我没有终止用斜线的URL，因为我在下面的菜单中的文件名以斜线开始。如果您终止您的网址在这里以一个斜线，不启动您的文件名下面以一个斜线。

如果您的网站设计与框架，您将需要使用“top.location.href”，而不是的“LOCATION.HREF”如果你想新的文件，以取代您的所有帧。你可以离开它，因为它是，如果你想要的文件出现在当前帧。另外，如果你希望它是在另一个框架（同级菜单出现在其中的一个），只需更换“的location.href”与“parent.your_frame.location.href”“your_frame”帧名为“your_frame的“。

现在菜单本身。由于确切的网址为您的网站为您的菜单和页面的名称会有所不同，你应该修改您的实际情况给出的代码。

<form action="dummyvalue">的
<select name="newurl" onchange="menu_goto(this.form)">
<option value="" selected="selected"> -----选择A ----- </选项“>”
<option value="/index.html">首页</选项>
<option value="/feedback.html">反馈</选项>
<option value="" disabled="disabled"> ----其他---- </选项>
<option value="/links.html">相关链接</选项>
</选择>
</ FORM>
请注意以下有关的菜单上面的代码：

1，本菜单的代码进入你的网页的部分，您希望您的菜单出现。

2为在<form>标记的action属性规定HTML。由于我们的形式永远不会使用它，你可以有一些虚拟值，因为我已经做了上面。

3是有助于将类似“选择页”菜单中的第一项，让游客看在下拉框中就会知道，它是一个菜单。我设置了“选择”属性以及该项目，以确保它作为默认选择显示在页面加载时。

4，“杂项”菜单项显示在菜单中的字幕或分离器的使用。他们作为组织的工具，以帮助游客看到菜单中的各个部分。许多现代浏览器将识别为“禁用”属性，而不是让游客选择该项。不过，如果你要确保，你可以设置你的主页或站点索引等项目的价值。

当然，你将不得不改变中的文件名每个选项“价值”的标签，以及这些文件的描述。

改变你的网页
琐碎的，不是吗？然而，改变您的网页也不是那么微不足道的，如果您的网站拥有众多的页面。更糟糕的是，如果你有意向，包括每一个菜单中，您的网站页面上，你每次添加一个新的页面，你必须要经过您的所有网页修改菜单。迟早，菜单将不再是一个新奇的。

我面对这个问题时，我决定把所有的thefreecountry.com页（当时其中编号为150左右），包括一个下拉菜单。对于那些你熟悉这个网站，你可能会知道，我添加新的页面（有新文章或其他类别的免费的东西），而定期。转换不仅会是一个痛苦，维护将是一场噩梦。

为了降低您的维护的噩梦，你可能要考虑下列选项之一。

使用JavaScript菜单生成的代码由thesitewizard的导航菜单向导。在生成代码时，一定要选择“纯JavaScript版本”。向导生成的代码，所有菜单项都包含在一个外部JavaScript文件。每当你需要添加一个页面时，只需改变，外部JavaScript文件和所有网页上的菜单将自动更新，瞬间。使用此代码中有一个额外的好处 - 如果你的访问者不必JavaScript中，您的菜单则不会出现在网页上。这是很好的，因为菜单不支持JavaScript将无法正常工作，无论如何，有它在您的网页上出现，但不能正常工作，往往使访问者在你的网站失去信心。

2.Put您的网站上的帧，并将其放置在一个帧中的每一页被加载的菜单。这样的话，你只需要修改一个页面。这种方法的缺点包括：到看到菜单（比你想象的更经常发生！），谁也不会到达您的站点通过框架页面的访问者不会得到很多人强烈厌恶帧;一些较旧的浏览器可以不处理帧;和，除非你采取专项行动，搜索引擎不索引网站帧特别好。

3.Put你在一个单独的文件菜单，包括每一页上使用服务器端包含（SSI）。再次，每次你添加到菜单，你只需要修改一个文件。缺点：有些主机需要使用SSI的文件有“。shtml的”延长您的所有网页，所以如果您的网页已经没有这个扩展，这意味着你必须重新命名所有的网页。但是，这是一个短期的问题。一旦您完成重命名，你已经解决了它。你当然应该设立某种形式的重定向，以便将您的旧人。html网页会被重定向到重命名的版本。

4.Put你在一个单独的文件菜单，但在上传前，运行一个脚本，在你自己的机器上，其插入到每个页面。然后上传修改过的页面到您的网站。这种方法的缺点是，每次你修改菜单，你必须重新上传，使用该菜单中的每一个单页。

结论
有一个下拉导航菜单，提高您的网站导航，并希望让你的访问者找到他们需要的信息在您的网站上。这里所描述的JavaScript菜单是一种方式，可以实现这样的菜单。

高端网站建设

文章关键词: 网站建设