[求助]---如何做一個menu

5201314886

我是新手不知如何是好,,,想大家教下我或者比貼士我....謝謝。
話說我現時是以html 做了一個menu 用css 美化,
效果是當mouse over 個menu item,,,item box會轉colour (e.g. hight black)...
當click 到某一個項目,,,該項目名稱會轉另一個colour (e.g. orange colour text)令到visitor知道自己click左某個項目。

(1)normal的情況:
(1)

(3a)大標題當mouse over,,會轉colour。
(3a)

(3b)sub-topic item, when mouse over 就會轉colour.
(3b)

(4a)大標題當select左,,會轉colour。
(4a)

(4b)sub-topic item, when click左去就會轉colour,,,其實係想比人知佢選擇左一個item.
(4b)

[ 本帖最後由 5201314886 於 2009-3-20 15:25 編輯 ]

5201314886

This is CSS code

/*""""""""""""""" Basic controls of - LHS Menu  """""""""""""""""""""""*/
/* STYLE: Menu's config.  */
#Menu_LHS {
  width:190px;
  float:left;
  margin-left:5px;
  margin-right:5px;
}

#Menu_LHS ul {
  list-style:none;
  margin:77px 0 0 0;
  padding:0;
  border-top:solid 1px #d8d8d8;
}

#Menu_LHS ul li{  /* normal item */
  border-bottom:solid 1px #ebebeb;
}

#Menu_LHS ul li.ttfirst { /*  Title with bg */
  border-bottom:solid 1px #ebebeb;
  background:url(images/main_pic/menu_bg_03.png);
}

#Menu_LHS ul li a.ttsub { /*  Sub-link item (STYLE: menulinka) */
  font-weight:bold;
  font-size:14px;
  color:#a4c2ba;
  text-decoration:none;
  display:block;
  padding:5px 0 6px 9px;
}

#Menu_LHS ul li a.ttnor { /*  Sub-link item (STYLE: menulinkb) */
  font-weight:bold;
  color:#7ea421;
  text-decoration:none;
  display:block;
  padding:5px 0 6px 9px;
}

#Menu_LHS ul li a.ttsub:hover, a.ttnor:hover {  /* 2 Sub-link item (MOUSE OVER)  */
  background:#eff5f5;
}

#Menu_LHS ul li a.Selected {
  color:#EFC850;
  font-size:14px;
}

5201314886

本身html 既code!!

<div id="Menu_LHS">
<ul>
  <li class="ttfirst"><a class="ttsub" href="milestone.php">Milestone</a></li>
  <li> </li>  
  <li class="ttfirst"><a class="ttsub" href="#">Corporate Management</a></li>
  <li><a class="ttnor" href="chairmans-message.php"><img src="images/main_pic/arrowgreen.gif" width="12" height="12" border="0" /> Chairman's Message</a></li>
  <li><a class="ttnor" href="chairmans-profile.php"><img src="images/main_pic/arrowgreen.gif" width="12" height="12" border="0" /> Chairman's Profile</a></li>
</ul>
</div>

5201314886

謝謝您的回答。
這個我知道。
但是網站有很多頁,,如果要每一頁都有選取的效果,,,豈不是我要把html的編碼重貼很多次？
那樣便會做成很不方便,,
如果我需要在menu新增多一個item,,,若我有一百個頁面,,,又要花時間把所有頁面改過,,,又多花一百次的時間...

我想知道的,,,是有沒有方法用一個program可以智慧地get url 然後根據相對的menu item而做到「選取的效果」??

用JS應該就可以吧？
把效果做成JS，每個頁面引用一次應該沒問題,,但卻不知如何入手...

[ 本帖最後由 5201314886 於 2009-3-23 10:20 編輯 ]

5201314886

原帖由 wmh 於 2009-3-23 11:40 發表
確實是可以透過 JavaScript 去達成的，不過這種效果一般都是透過 Server 端去做的，第一時間呈現在 client  端的就是正確的效果，而透過 JavaScript 則是需要等到頁面出來後，再去改變 className

你可以透過 location.href  ...

謝謝您…
\好像很複雜呢…
請問可不可以給我範例呢？

5201314886

想請問您，是不是貼了那個jQuery就不用再重貼html?

5201314886

原帖由 wmh 於 2009-3-24 16:19 發表
重貼什麼html呢，不太瞭解？

我的意思是：

是不是把您的code貼到header以後就代替了本身MENU的html code???

<div id="Menu_LHS">
<ul>
  <li class="ttfirst"><a class="ttsub" href="milestone.php">Milestone</a></li>
  <li> </li>  
  <li class="ttfirst"><a class="ttsub" href="#">Corporate Management</a></li>
  <li><a class="ttnor" href="chairmans-message.php"><img src="images/main_pic/arrowgreen.gif" width="12" height="12" border="0" /> Chairman's Message</a></li>
  <li><a class="ttnor" href="chairmans-profile.php"><img src="images/main_pic/arrowgreen.gif" width="12" height="12" border="0" /> Chairman's Profile</a></li>
</ul>
</div>

請問以上的menu 部份什樣處理呢？