65.9K
CodeProject 正在变化。 阅读更多。
Home

动态菜单

premshree
starIconstarIconemptyStarIconemptyStarIconemptyStarIcon

2.00/5 (6投票s)

2002年12月3日

3分钟阅读

viewsIcon

117180

使用 Javascript 创建一个导航菜单，该菜单可以识别活动页面，并相应地以不同于其他链接的方式显示该链接，以便用户轻松导航。

引言

在这里，我不是在谈论 DHTML 下拉/弹出菜单。我在这里谈论的是一个使用 Javascript 创建的简单导航菜单，该菜单可以识别活动页面，并相应地以不同于其他链接的方式显示该链接，以便用户轻松导航。 在这里，我将使用一个 .js 文件，该文件将用于导航菜单下的所有页面。 因此，您无需更新所有页面，而只需更新一个 javascript 库文件（.js 文件）即可。 例如，考虑 3 个链接，即 "www.qiksearch.com"、"Articles"、"Javascripts"。

www.qiksearch.com 为活动状态 Articles 为活动状态 Javascripts 为活动状态

您可以在 http://www.qiksearch.com 上查看这样的导航菜单

解释

如您所见，这些是在不同页面上，根据活动链接，导航菜单显示方式的截图。 这些菜单由单个 javascript 文件生成。 好吧，只需使用级联样式表 (CSS) 创建这样的菜单，通过为菜单定义一个类，例如 .links，然后为 .links:active 提供不同的属性，就可以实现。 这样，您只需使用 CSS 文件即可完成工作。 虽然这很完美，但如果您在此处使用 Javascript，则会有一个优势。 如您在上面的截图中看到的，活动链接的末尾有“»”字符。 这是仅为活动链接创建的，即它是动态创建的。 在这里，您可以使用任何字符或图标图像，使链接看起来真正处于活动状态。

实现

要实现这样的导航菜单，首先您需要一个 CSS 文件，例如links_style.css，用于定义链接的样式。 接下来是 Javascript 文件 nav.js。 在文件 nav.js 中，首先我们声明三个数组。 一个名为“links”的数组，它们是链接的名称。 另一个数组“links_text”，其中包含链接的文本（例如 Javascripts）。 前者将用于比较。 将链接数组中的各个元素命名为链接文件，但不带扩展名（即如果第一个链接将您带到 index.htm，则将其命名为 index）。 第三个数组称为“links_url”，是链接将您带到的 URL。

现在，我们想要做的是将数组链接中的每个元素与当前页面的文件名（不带扩展名）进行比较，并相应地为其分配样式，以及如果要添加到链接文本中的任何额外文本或图像（如果该特定链接是活动页面）。

设 loc 为比较字符串。 可以按以下方式找到 loc

	var loc=String(this.location);
  	loc=loc.split(";/";);
	loc=loc[loc.length-1].split(";.";);
	loc=loc[loc.length-2];

因此，如果当前页面是 http://www.qiksearch.com/index.htm，则 loc 将为 index。 现在，我们将此与数组链接中的每个元素进行比较。 该数组的第一个元素和 loc 相等，因此我们以以下方式编写此链接。（将 document.write('.....') 中每次出现的 '（即单引号）替换为 '）

document.write('<table class=";explorer_active"; onmouseover=";this.className='explorer_active';return true"; 
  onmouseout=";this.className='explorer_active';return true"; 
  onmousedown=";this.className='explorer_active';return true"; 
  onclick=";location.href='' + links_url[i] + ''";><tr><td><a href=";' + links_url[i] + '"; class=";menu";>' 
  + links_text[i] + ' <b>»</b></a></td></tr></table>');

由于 links 中的其他元素不等于 loc，因此它们将写为

document.write('<table class=";explorer"; onmouseover=";this.className='explorer_over';return true"; 
   onmouseout=";this.className='explorer';return true"; 
   onmousedown=";this.className='explorer_down';return true"; 
   onclick=";location.href='' + links_url[i] + ''";><tr><td><a href=";' 
   + links_url[i] + '"; class=";menu";>' + links_text[i] + '</a></td></tr></table>');

因此，最后您得到一个动态菜单。 您需要在所有页面中放置的唯一代码是

<script language=";javascript"; src=";nav.js";></script>

将此代码放在页面上需要导航菜单的位置。 您需要的另一个代码是

<link rel=";stylesheet"; href=";links_style.css";>

此代码必须放在 HTML 页面的 <HEAD> 部分中。

列表 1 nav.js

// Qiksearch Menu v 1.0
// (c) 2002 Premshree Pillai
// http://www.qiksearch.com
// qiksearch@rediffmail.com

var links = new Array (";index";, ";articles";, ";javascripts";);
var links_text = new Array (";www.qiksearch.com";, ";Articles";, ";JavaScripts";);
var links_url = new Array (";index.htm";, ";articles.htm";, ";javascripts.htm";);

var loc=String(this.location);
loc=loc.split(";/";);
loc=loc[loc.length-1].split(";.";);
loc=loc[loc.length-2];

function qiksearch_menu_gen()
{
	for(var i=0; i<links.length; i++)
	{
		if(loc==links[i])
		{
			document.write('<table class=";explorer_active"; 
			   onmouseover=";this.className='explorer_active';return true"; 
			   onmouseout=";this.className='explorer_active';return true"; 
			   onmousedown=";this.className='explorer_active';return true"; 
			   onclick=";location.href='' + links_url[i] + ''";><tr><td><a href=";' 
			   + links_url[i] + '"; class=";menu";>' + links_text[i] 
			   + ' <b>»</b></a></td></tr></table>');
		}
		else
		{
			document.write('<table class=";explorer"; 
			    onmouseover=";this.className='explorer_over';return true"; 
			    onmouseout=";this.className='explorer';return true"; 
			    onmousedown=";this.className='explorer_down';return true"; 
			    onclick=";location.href='' + links_url[i] + ''";><tr><td><a href=";' 
			    + links_url[i] + '"; class=";menu";>' + links_text[i] 
			    + '</a></td></tr></table>');
		}
		document.write('<table cellspacing=";0"; cellpadding=";0"; 
		    bgcolor=";#FFFFFF";><tr><td></td></tr></table>');
	}
}

qiksearch_menu_gen();

列表 2 links_style.css

.explorer{font-family:verdana,arial,helvetica; font-size:8pt; font-weight:normal; 
      text-decoration:none; color:#000000; background:#B5D0FF; cursor:hand; width:150px; 
      height:30px; border:1 solid #A6C0ED}
.explorer_over{font-family:verdana,arial,helvetica; font-size:8pt; font-weight:normal; 
      text-decoration:none; color:#000000; background:#A7C0EB; cursor:hand; width:150px; 
      height:30px; border-right:1 solid #5C6980; border-bottom:1 solid #5C6980; 
      border-left:1 solid #B8D3FF; border-top:1 solid #B8D3FF}
.explorer_down{font-family:verdana,arial,helvetica; font-size:8pt; font-weight:normal; 
      text-decoration:none; color:#000000; background:#A7C0EB; cursor:hand; width:150px; 
      height:30px; border-left:1 solid #5C6980; border-top:1 solid #5C6980; 
      border-right:1 solid #B8D3FF; border-bottom:1 solid #B8D3FF}
.explorer_active{font-family:verdana,arial,helvetica; font-size:8pt; font-weight:normal; 
      text-decoration:none; color:#000000; background:#FFFFFF; cursor:hand; 
      width:150px; height:30px}
.menu{font-family:verdana,arial,helvetica; font-size:8pt; font-weight:normal; 
      text-decoration:none; color:#000000}

我希望此脚本简化了网页的导航。请给我发送您的评论/建议。

© 2002 Premshree Pillai 网址：http://www.qiksearch.com

© . All rights reserved.