[求助]---如何做一個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>

wmh

我看到你的 CSS 已經設定好了一個給選取用的：

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

因此當你連到被選取的那一頁時，假設是 milestone.php，那這一頁出來的 HTML 就要改為：

<div id="Menu_LHS">  
<ul>  
  <li class="ttfirst"><a class="ttsub Selected" href="milestone.php">Milestone</a></li>  

這樣那個 Milestone 就會有選取的效果了。

5201314886

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

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

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

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

wmh

確實是可以透過 JavaScript 去達成的，不過這種效果一般都是透過 Server 端去做的，第一時間呈現在 client  端的就是正確的效果，而透過 JavaScript 則是需要等到頁面出來後，再去改變 className

你可以透過 location.href 得知目前的 url，再透過 JavaScript 去改變特定連結 <a> 的 className。

5201314886

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

你可以透過 location.href  ...

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

wmh

我用 jQuery 幫你寫一段簡單的 code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  var path = location.href.split('/');
  var filename = path[path.length - 1];
  $('a[class=ttsub][href=' + filename + ']').addClass('Selected');
});
</script>

只要加在 </body> 的前面即可。

5201314886

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

wmh

重貼什麼html呢，不太瞭解？