建立自己的Web Menu(1)

  一直想給自己的網站添加一些新比較流行的元素,比如加一個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);
 }
}