学步园

  一直想给自己的网站添加一些新比较流行的元素,比如加一个Web Menu（就像微软的网站上使用的那种风格,可以参看www.microsoft.com）来为客户的浏览提供导航功能，而且也显得比较专业。我想这无非是一些客户端的代码，客户端的功能实现，当然首选JavaScript。虽然以前我也做过自己的网站，但是JavaScript自己却不是很熟，所以想在网站上找一些代码来实现。几经搜索，找到一些ASP.net控件，下下来一看，js文件应该是使用混淆器处理过了，看不出个所以然。再看看微软的网页源码，只是链接到后台的js文件，看不到js文件的内容。最后还是下定决心自己动手来实现吧。

      要实现客户端的功能，看来JavaScript语言是绕不过了。花了3天时间在网上找了一些JavaScript的资料并且找到《JavaScript圣经》大概通读一遍。心中对我要做的东西有了个模糊的轮廓，先来看看要实现的功能：

• 当鼠标移动到菜单项上要高亮显示菜单项。
• 当鼠标移动到有子菜单的菜单项上时应该弹出子菜单。
• 菜单的内容应该可以配置，用XML来保存。
• 当鼠标在子菜单上移动时应该标识出子菜单的父菜单项。
• 当用户点击到菜单项的时候，应响应用户的行为定位到相应的页面。

     再看看用什么样的HTML元素来表示菜单，使用Div，Span，Table还是用UR？因为我是做竖版的Menu，所以就不用Span了，因为Span是不换行的－做横版的Menu就可以用Span：）。用Table的话，太不灵活，还要管理Table本身的一些元素。用UR的话，没有子菜单倒是很简单也很方便，不过就不适合用于做带子菜单的Menu了。

    要实现Web Menu的显示，样式表是必不可免了。现看看需要用到的核心的样式表元素：

• 首先是确定Menu的显示位置以及尺寸，是用static，relative还是absolute。absolute是用不成了，除非你的网站全不都是使用Absolute方式，这样用起来可能会好一些，relative是基于父元素计算偏移量，最后的选择是使用默认的static，这样适用性也比较强。
• 下来是考虑子菜单的显示和隐藏。使用visibility呢还是使用display。visibility虽然会隐藏子菜单但是它依然会占用网页的空间，但是display就不会，它应该是真正的隐藏，所以使用display。

    子菜单显示在什么地方是一个很关键的问题。DHTML提供了一大堆的最表属性，看得让人头晕，不过最后还是使用OffsetParent得offset族得坐标来确定子菜单得具体位置，这样得话要写一个递归函数来获得具体得坐标。我们可以从下图看到Web元素得各种坐标：

    可以通过递归计算当前元素得父元素得offsetLeft属性计算出当前元素应显示得left坐标：

function getAscendingLefts(elem)
{
 if (elem==null)
  return 0;
 else
 {
  if (elem.style.position=='absolute' || elem.style.position=='relative') return 0;
  return elem.offsetLeft+getAscendingLefts(elem.offsetParent);
 }
}

   同理也可一写出计算Top坐标得函数：

function getAscendingTops(elem)
{
 if (elem==null)
  return 0;
 else
 {
  if ((elem.style.position=='absolute' || elem.style.position=='relative')) return 0;
  return elem.offsetTop+getAscendingTops(elem.offsetParent);
 }
}