返回列表 發帖

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

我是新手不知如何是好,,,想大家教下我或者比貼士我....謝謝。
話說我現時是以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 編輯 ]

喔,不是啦,你原本的部份都不用改變。我寫得那一段有另外註明喔:

只要加在 </body> 的前面即可。
To infinity and beyond!

TOP

原帖由 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 部份什樣處理呢?

TOP

重貼什麼html呢,不太瞭解?
To infinity and beyond!

TOP

回復 wmh 的帖子

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

TOP

我用 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> 的前面即可。
To infinity and beyond!

TOP

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

你可以透過 location.href  ...


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

TOP

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

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

TOP

回復 4# 的帖子

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

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

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

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

TOP

我看到你的 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 就會有選取的效果了。
To infinity and beyond!

TOP

返回列表 回復 發帖