萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 網頁菜單詳解
網頁菜單詳解
首先看這下面的例子（鼠標移上去）：
Link 1
Link 2
Link 3
Link N
菜單實例
類似這樣的仿Windows下拉菜單，在網上是比較常見的，最初出現在微軟網站上，之後被大量效仿。 事實上制作這樣一個模擬菜單也並不是一件很困難的事，比如上面的例子代碼如下：
-------------------------------------------
<!-- 樣式部分 -->
<style type=text/css>
td,div { font: normal 12px 宋體; }
a { color: #F8F8F8; text-decoration: none; }
a:hover { color: #F8F8F8; text-decoration: underline; }
</style>
<!-- 實現部分 -->
<div
onmouseout="myMenu.style.display='none'">
<div >
<div id=myMenu >
Link 1<br>
Link 2<br>
Link 3<br>
<br>
Link N<br>
</div>
</div>
菜單實例
</div>
----------------------------------- 那麼下面我們就由淺入深的對這種模擬菜單進行分析講解。
在講解之前，有一點需要說明的是：筆者在後面講解的代碼都基於當前的主流浏覽器Microsoft Internet Explorer（即我們通常所說的IE）下的。筆者進行調試的浏覽器是IE 5.01。另外，這樣一個菜單體現的是HTML/CSS/javascript的綜合應用，這裡並不對一些細節進行詳細的講解，所以你至少應該有一點這方面的基礎。
基本原理
其實，這個菜單實現的原理簡單的說就是：設置頁面元素的CSS屬性，對其進行定位並設置其是否可見，然後通過激發一定的事件，用javascript來動態的改變這些屬性。
看下面幾個CSS屬性：
position：定位類型，取值static/absolute/relative，其代表的含義簡單的說即無定位/絕對定位/相對定位；
left：距離左側的位置（具體的參照物與position的設置有關），單位為px或%；
top：距離頂部的位置（具體的參照物與position的設置有關），單位為px或%。
display：頁面元素的顯示狀態，如取值block表示做為塊狀元素顯示，none則為不顯示，還有其他一些取值（如inline等）這裡就不做詳解。
比如上例中的“div id=myMenu myMenu.style.display='block'"”就是一個很普通的用法，其中myMenu即我們所看到的“菜單”的ID，它原來的display為none，即不顯示，當鼠標移上去時，變為block，即塊狀顯示。
另外要提的是：前面只說了如何實現定位、如何動態控制，那麼定位的、控制的是什麼元素呢？原則上來講，大部分塊狀元素（如div、table）都可以，而在IE中，div標記（注意，在一些非IE浏覽器中，並不支持div標記）因其使用的靈活性和方便性而做為我們的首選。上例使用的就是div標記。
好啦，基本的過程，上面大致已經說完了，在下一章，我們將看到使用上面提到的技術來實現一個簡單的菜單。
模擬網頁下拉菜單中有幾個比較關鍵的CSS屬性：position、left、top、display，同時，他們也是style對象的屬性,今天我們就用這幾個基本屬性來實現一個簡單的網頁菜單。
首先請大家看筆者已經做好的一個實例，然後我們對這個例子進行詳細代碼講解。
為大家閱讀方便，這裡采用在代碼中加注釋的方式，紅色部分為注釋。
代碼如下：
------------------------------------------------------
<html>
<head>
<title>菜單實例</title>
<style type=text/css>
td,div { font: normal 12px 宋體; }
</style>
</head>
<body >
<table cellpadding=0 cellspacing=0 width=90% height=20 bgcolor=#CCCCCC>
<tr>
<td width=10> </td>
<td width=80 align=center
onmouseout="menuHide(menu01)">菜單實例</td>
<!--
上兩行為菜單中顯示的文字，注意這裡面的事件觸發：
鼠標經過時顯示菜單；
onmouseout="menuHide(menu01)" 鼠標移走時隱藏菜單。
參數menu01即要顯示的菜單的id，將在接下來的代碼中看到。
menuShow與menuHide分別為顯示、隱藏菜單方法，將在後面定義。
-->
<td> </td>
</tr>
</table>
<div id=menu01
onmouseout="menuHide(this)">
<!--
以上三行，定義了菜單的一些屬性，注意“id=menu01”，前面提到過。
position、top、left、display四個CSS屬性即上一章講過的；
width、height、background-color分別為寬度、高度、背景色。
這裡再一次出現 onmouseout="menuHide(this)"，
就是說當鼠標從菜單按鈕上移開，如果是移到了菜單上，菜單仍然顯示。
注意這裡參數是this而不是menu01，this即對象本身，在這裡就是指menu01，所以結果相同。
在這裡筆者有意使用this，只是想告訴大家一個技巧，這在很多時候非常方便。
-->
<br> 菜單內容
</div>
<script language=javascript>
function menuShow(menu) //定義顯示菜單的方法，參數menu即菜單的id。
{
menu.style.display='block';
//注意這裡如何用javascript改變style對象的屬性來達到改變CSS屬性的目的。
}
function menuHide(menu) //定義隱藏菜單的方法，參數menu即菜單的id。
{
menu.style.display='none';
//同上
}
</script>
</body>
</html>
------------------------------------------------------ 這樣，一個簡單的菜單就實現了，只要你略有一些相關的基礎知識，反復體會一下我加的注釋，就應該可以理解了，是不是並不難？
這個菜單現在看上去還有點簡陋，下次我們將對這個菜單進行進一步的修飾。
這一章，我們就來討論如何美化它。
美化主要表現在鼠標放到菜單上後（即鼠標懸停）的效果，這裡首先介紹幾個經常用到的CSS屬性：
background-color：背景色，其值為一個顏色值，如“#FF0000”、“red”。
border：邊框樣式，一個形如“寬度 樣式 顏色”的字符串，如“1px solid red”，即1px的紅色實線邊框。
cursor：鼠標指針樣式，取值為表示鼠標指針樣式的字符串，如“hand”、“help”，即小手、幫助狀態。
以上只是簡單的介紹了幾個在此類菜單中非常常見的CSS屬性，這裡也並未做很詳盡的解釋（畢竟這些並不是我們要講解的重點），欲了解更多可參閱相關資料。筆者在這裡想說的是：掌握更多的CSS屬性會對你有所幫助。
前面說了，美化主要表現在鼠標放到菜單上後的效果，那麼如何用javascript來控制樣式的變化呢？或者你會想到前面講過的style對象，的確，用style可以達到目的，但是，很多時候，需要改變很多個CSS屬性，用style就顯得有些麻煩。我們再來介紹一個新的屬性：className。
className屬性對應的就是CSS的class，也即所謂的偽類，比如在某個標記中設置class=myName，那麼這時該元素的className屬性就是myName。
來看下面這個例子：
--------------------------------------------
<style type="text/css">
.style_normal { color: gray; }
.style_over { color: red; }
</style>
<span class=style_normal
onmouseout="this.className='style_normal'">
鼠標移上來，通過className屬性改變這段文字的class，使文字顏色變成紅色；
移走，又恢復原來的顏色。</span>
----------------------------------------------
效果如下（把鼠標放到文字上）：
我們看到，在處理相對復雜的樣式變化的情況下，用className就方便得多了，至於樣式如何變化，就變成如何定義class的問題了。
講到這裡，我想有一定CSS基礎的朋友應該已經清楚如何來修飾這個菜單了，即便你對CSS了解的還不多，前面已經介紹了幾個較常用的屬性。所以，這裡就不再多講了，最後提供兩個筆者做好的例子，希望你能從中受到啟發（查看源文件即可看到相應的代碼，相應位置加了注釋，在此就不另行給出）。
1. 一個簡單的背景變化
2. 仿office XP菜單效果
上面兩例都用了灰色，你當然可以改成你自己喜歡的顏色。這兩例也是比較常見的效果，這裡提供給大家也
- 上一頁:CSS如何使DIV層居中
- 下一頁:10條影響CSS渲染速度的寫法
