jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 » 網頁設計 » [求助]---如何做一個menu

5201314886 發表於 2009-3-20 15:18

[求助]---如何做一個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)[URL=http://images.upload2world.com][IMG]http://images.upload2world.com/get-3-2009-upload2world_com_yywu.png[/IMG][/URL]

(3a)大標題當mouse over,,會轉colour。
(3a)[URL=http://images.upload2world.com][IMG]http://images.upload2world.com/get-3-2009-upload2world_com_xynkvt.png[/IMG][/URL]

(3b)sub-topic item, when mouse over 就會轉colour.
(3b)[URL=http://images.upload2world.com][IMG]http://images.upload2world.com/get-3-2009-upload2world_com_kmgld.png[/IMG][/URL]

(4a)大標題當select左,,會轉colour。
(4a)[URL=http://images.upload2world.com][IMG]http://images.upload2world.com/get-3-2009-upload2world_com_tpnj.png[/IMG][/URL]

(4b)sub-topic item, when click左去就會轉colour,,,其實係想比人知佢選擇左一個item.
(4b)[URL=http://images.upload2world.com][IMG]http://images.upload2world.com/get-3-2009-upload2world_com_nlizg.png[/IMG][/URL]

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

5201314886 發表於 2009-3-20 15:27

This is CSS code[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;
}[/code]

5201314886 發表於 2009-3-20 15:29

本身html 既code!![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>[/code]

wmh 發表於 2009-3-22 00:14

我看到你的 CSS 已經設定好了一個給選取用的：
[code css]
#Menu_LHS ul li a.Selected {  
  color:#EFC850;  
  font-size:14px;  
}  
[/code]

因此當你連到被選取的那一頁時，假設是 milestone.php，那這一頁出來的 HTML 就要改為：
[code html]
<div id="Menu_LHS">  
<ul>  
  <li class="ttfirst"><a class="ttsub Selected" href="milestone.php">Milestone</a></li>  
[/code]


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

5201314886 發表於 2009-3-23 09:52

回復 4# 的帖子

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

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

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

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

wmh 發表於 2009-3-23 11:40

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

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

5201314886 發表於 2009-3-23 13:26

[quote]原帖由 [i]wmh[/i] 於 2009-3-23 11:40 發表 [url=http://jsgears.com/redirect.php?goto=findpost&pid=422&ptid=190][img]http://jsgears.com/images/common/back.gif[/img][/url]
確實是可以透過 JavaScript 去達成的，不過這種效果一般都是透過 Server 端去做的，第一時間呈現在 client  端的就是正確的效果，而透過 JavaScript 則是需要等到頁面出來後，再去改變 className

你可以透過 location.href  ... [/quote]

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

wmh 發表於 2009-3-23 20:56

我用 jQuery 幫你寫一段簡單的 code:
[code js]
<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>
[/code]

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

5201314886 發表於 2009-3-24 16:07

回復 wmh 的帖子

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

wmh 發表於 2009-3-24 16:19

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

5201314886 發表於 2009-3-24 17:36

[quote]原帖由 [i]wmh[/i] 於 2009-3-24 16:19 發表 [url=http://jsgears.com/redirect.php?goto=findpost&pid=430&ptid=190][img]http://jsgears.com/images/common/back.gif[/img][/url]
重貼什麼html呢，不太瞭解？ [/quote]

我的意思是：

是不是把您的code貼到header以後就代替了本身MENU的html code???[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>[/code]請問以上的menu 部份什樣處理呢？

wmh 發表於 2009-3-24 17:45

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

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

查看完整版本: [求助]---如何做一個menu