網頁菜單詳解：基本原理日期：2012/12/5 11:53:53　　

　　在講解之前，有一點需要說明的是：筆者在后面講解的代碼都基于當前的主流瀏覽器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 style="position:absolute;left:-10px;top:18px;display:none...”就是使用了這幾個屬性。

　　下面我們來看看如何用javascript來控制頁面元素的CSS屬性。

　　對HTML有一定了解的朋友一定清楚，幾乎所有的標記都有一個style屬性，通過設置這個屬性來設置該標記的CSS屬性（即CSS的內聯用法）。在javascript中，每一個標記都被視為Document對象的一個子對象，而該標記的每一個HTML屬性也都是這個對象的屬性或子對象，style就是其中一個，通過用javascript控制style的屬性，就達到了動態改變頁面元素CSS屬性的目的。如上例中的“onmouseover="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 style="margin-left:12px;margin-top:16px;"><table cellpadding=0 cellspacing=0 width=90% height=20 bgcolor=#CCCCCC> <tr> <td width=10> </td> <td width=80 align=center onmouseover="menuShow(menu01)" onmouseout="menuHide(menu01)">菜單實例</td>  <td> </td> </tr></table><div style="position:absolute;top:36px;left:20px;display:none;width:80px;height:100px;background-color:#DDDDDD;" id=menu01onmouseover="menuShow(this)" onmouseout="menuHide(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。

　　來看下面這個例子：

--------------------------------------------<span onmouseover="this.className='style_over'"onmouseout="this.className='style_normal'">鼠標移上來，通過className屬性改變這段文字的class，使文字顏色變成紅色；移走，又恢復原來的顏色。</span>----------------------------------------------
　　

　　我們看到，在處理相對復雜的樣式變化的情況下，用className就方便得多了，至于樣式如何變化，就變成如何定義class的問題了。

　　講到這里，我想有一定CSS基礎的朋友應該已經清楚如何來修飾這個菜單了，即便你對CSS了解的還不多，前面已經介紹了幾個較常用的屬性。所以，這里就不再多講了

通過前三篇文章的講解，現在我們已經可以實現一個基本的菜單了。這一章，我們來討論一下定位的問題。

　　在前幾章講的例子中，定位都是相對于整個網頁的左上角。在有一些時候，我們可能需要它相對于網頁中某個元素定位，這樣做在某些時候是非常有必要的，比如不會出現那種因窗口大小的改變而致使菜單與網頁中的一些元素的相對位置發生變化。在第一章的最初，筆者所給的例子中就是這樣做的。

　　在那里我們很方便把就把這個菜單插入到了網頁中，而菜單不會相對菜單按鈕的位置發生變化。下面我們就看看如何來實現。

　　在第一章，我們講過position，當它取值absolute的時候，即絕對定位。既然是定位，就要有參照物。一般來講，這個定位的參照物是body（即整個網頁）的左上角，但如果其父級元素中有設置了position:absolute的元素，那么它的參照物就是該元素。知道了這樣一個特性，我們就可以很容易的來實現了。

　　另外，有一點在這里必須要著重說明一下，前面同時也講過，當position的值為relative時，就是相對定位，為什么不用它來實現呢？我們必須要正確理解這里所謂的相對定位：它是指相對于原來在HTML中的位置所發生的偏移，而它仍占據原來在HTML中所占據的位置。而我們現在的菜單需要“懸浮”在網頁元素之上，而這只有當position設為absolute時才可以做到。

　　通過上面的講述，我們應該可以大致的了解其實現的原理了。下面就看看剛才在上面看到的那個菜單的代碼（注意里面的注釋會幫你加深理解）。

-------------------------------------------------------------------------------
<div onmouseover="myMenu.style.display='block'"onmouseout="myMenu.style.display='none'"> Link 1<br> Link 2<br> Link 3<br> Link N<br> 菜單實例-------------------------------------------

　　請仔細理解上面的代碼，相信大家對用CSS進行絕對定位會有一個更深層次的認識！

　　這里說一句題外話：這種定位可以用Dreamweaver來實現（這對于對JS不是很熟的朋友來講的確很方便），而事實上這樣做生成的代碼的原理與上面講的相同的。把上面講的原理弄清楚了，使用起來會更靈活。

網頁菜單詳解：基本原理日期：2012/12/5 11:53:53

咨詢電話：15201609116

網頁菜單詳解：基本原理日期：2012/12/5 11:53:53　　