標題: [求助]---如何做一個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)
(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 時間: 2009-3-20 15:27
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 時間: 2009-3-20 15:29
本身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 時間: 2009-3-22 00:14
我看到你的 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 時間: 2009-3-23 09:52 標題: 回復 4# 的帖子
謝謝您的回答。
這個我知道。
但是網站有很多頁,,如果要每一頁都有選取的效果,,,豈不是我要把html的編碼重貼很多次？
那樣便會做成很不方便,,
如果我需要在menu新增多一個item,,,若我有一百個頁面,,,又要花時間把所有頁面改過,,,又多花一百次的時間...
我想知道的,,,是有沒有方法用一個program可以智慧地get url 然後根據相對的menu item而做到「選取的效果」??
用JS應該就可以吧？
把效果做成JS，每個頁面引用一次應該沒問題,,但卻不知如何入手...
[ 本帖最後由 5201314886 於 2009-3-23 10:20 編輯 ]
作者: wmh 時間: 2009-3-23 11:40
確實是可以透過 JavaScript 去達成的，不過這種效果一般都是透過 Server 端去做的，第一時間呈現在 client 端的就是正確的效果，而透過 JavaScript 則是需要等到頁面出來後，再去改變 className
你可以透過 location.href 得知目前的 url，再透過 JavaScript 去改變特定連結 <a> 的 className。
作者: 5201314886 時間: 2009-3-23 13:26
原帖由 wmh 於 2009-3-23 11:40 發表 
確實是可以透過 JavaScript 去達成的，不過這種效果一般都是透過 Server 端去做的，第一時間呈現在 client 端的就是正確的效果，而透過 JavaScript 則是需要等到頁面出來後，再去改變 className
你可以透過 location.href ...
謝謝您…
\好像很複雜呢…
請問可不可以給我範例呢？
作者: wmh 時間: 2009-3-23 20:56
我用 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 時間: 2009-3-24 16:07 標題: 回復 wmh 的帖子
想請問您，是不是貼了那個jQuery就不用再重貼html?
作者: wmh 時間: 2009-3-24 16:19
重貼什麼html呢，不太瞭解？
作者: 5201314886 時間: 2009-3-24 17:36
原帖由 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 部份什樣處理呢？
作者: wmh 時間: 2009-3-24 17:45
喔，不是啦，你原本的部份都不用改變。我寫得那一段有另外註明喔：
| 歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/) |
|