網(wǎng)頁(yè)菜單，讓你的網(wǎng)站更具個(gè)性

仿Windows下拉菜單，在網(wǎng)上是比較常見(jiàn)的，最初出現(xiàn)在微軟網(wǎng)站上，之后被大量效仿。 事實(shí)上制作這樣一個(gè)模擬菜單也并不是一件很困難的事，比如上面的例子代碼如下：

-------------------------------------------

＜!-- 樣式部分 --＞

＜style type=text/css＞

td,div { font: normal 12px 宋體; }

a { color: #F8F8F8; text-decoration: none; }

a:hover { color: #F8F8F8; text-decoration: underline; }

＜/style＞

＜!-- 實(shí)現(xiàn)部分 --＞

＜div style="background-color:#3366CC;width:68px;text-align:center;

padding:3px;border-bottom:1px solid #FFFFFF;z-index:1;"

onmouseover="myMenu.style.display='block'"

onmouseout="myMenu.style.display='none'"＞

＜div style="position:absolute;width:0px;height:0px;overflow:visible;"＞

＜div id=myMenu style="position:absolute;left:-10px;top:18px;display:none;

width:90px;background-color:#3366CC;padding:5px;text-align:left;"＞

 ＜a href=#none＞Link 1＜/a＞＜br＞

 ＜a href=#none＞Link 2＜/a＞＜br＞

 ＜a href=#none＞Link 3＜/a＞＜br＞

 ＜a＞...＜/a＞＜br＞

 ＜a href=#none＞Link N＜/a＞＜br＞

＜/div＞

＜/div＞

＜a href=#none＞菜單實(shí)例＜/a＞

＜/div＞

-----------------------------------

那么下面我們就由淺入深的對(duì)這種模擬菜單進(jìn)行分析講解。

在講解之前，有一點(diǎn)需要說(shuō)明的是：筆者在后面講解的代碼都基于當(dāng)前的主流瀏覽器Microsoft Internet Explorer（即我們通常所說(shuō)的IE）下的。筆者進(jìn)行調(diào)試的瀏覽器是IE 5.01。另外，這樣一個(gè)菜單體現(xiàn)的是HTML/CSS/javascript的綜合應(yīng)用，這里并不對(duì)一些細(xì)節(jié)進(jìn)行詳細(xì)的講解，所以你至少應(yīng)該有一點(diǎn)這方面的基礎(chǔ)。

基本原理

其實(shí)，這個(gè)菜單實(shí)現(xiàn)的原理簡(jiǎn)單的說(shuō)就是：設(shè)置頁(yè)面元素的CSS屬性，對(duì)其進(jìn)行定位并設(shè)置其是否可見(jiàn)，然后通過(guò)激發(fā)一定的事件，用javascript來(lái)動(dòng)態(tài)的改變這些屬性。

看下面幾個(gè)CSS屬性：

position：定位類型，取值static/absolute/relative，其代表的含義簡(jiǎn)單的說(shuō)即無(wú)定位/絕對(duì)定位/相對(duì)定位；

left：距離左側(cè)的位置（具體的參照物與position的設(shè)置有關(guān)），單位為px或%；

top：距離頂部的位置（具體的參照物與position的設(shè)置有關(guān)），單位為px或%。

display：頁(yè)面元素的顯示狀態(tài)，如取值block表示做為塊狀元素顯示，none則為不顯示，還有其他一些取值（如inline等）這里就不做詳解。

比如上例中的“div id=myMenu style="position:absolute;left:-10px;top:18px;display:none...”就是使用了這幾個(gè)屬性。

下面我們來(lái)看看如何用javascript來(lái)控制頁(yè)面元素的CSS屬性。

對(duì)HTML有一定了解的朋友一定清楚，幾乎所有的標(biāo)記都有一個(gè)style屬性，通過(guò)設(shè)置這個(gè)屬性來(lái)設(shè)置該標(biāo)記的CSS屬性（即CSS的內(nèi)聯(lián)用法）。在javascript中，每一個(gè)標(biāo)記都被視為Document對(duì)象的一個(gè)子對(duì)象，而該標(biāo)記的每一個(gè)HTML屬性也都是這個(gè)對(duì)象的屬性或子對(duì)象，style就是其中一個(gè)，通過(guò)用javascript控制style的屬性，就達(dá)到了動(dòng)態(tài)改變頁(yè)面元素CSS屬性的目的。如上例中的“onmouseover="myMenu.style.display='block'"”就是一個(gè)很普通的用法，其中myMenu即我們所看到的“菜單”的ID，它原來(lái)的display為none，即不顯示，當(dāng)鼠標(biāo)移上去時(shí)，變?yōu)閎lock，即塊狀顯示。

另外要提的是：前面只說(shuō)了如何實(shí)現(xiàn)定位、如何動(dòng)態(tài)控制，那么定位的、控制的是什么元素呢？原則上來(lái)講，大部分塊狀元素（如div、table）都可以，而在IE中，div標(biāo)記（注意，在一些非IE瀏覽器中，并不支持div標(biāo)記）因其使用的靈活性和方便性而做為我們的選。上例使用的就是div標(biāo)記。

好啦，基本的過(guò)程，上面大致已經(jīng)說(shuō)完了。

初步實(shí)現(xiàn)

模擬網(wǎng)頁(yè)下拉菜單中有幾個(gè)比較關(guān)鍵的CSS屬性：position、left、top、display，同時(shí)，他們也是style對(duì)象的屬性（請(qǐng)參見(jiàn)網(wǎng)頁(yè)菜單基本原理），今天我們就用這幾個(gè)基本屬性來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)菜單。

首先請(qǐng)大家看筆者已經(jīng)做好的一個(gè)實(shí)例，然后我們對(duì)這個(gè)例子進(jìn)行詳細(xì)代碼講解。

為大家閱讀方便，這里采用在代碼中加注釋的方式，紅色部分為注釋。

代碼如下：

------------------------------------------------------

＜html＞

＜head＞

＜title＞菜單實(shí)例＜/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)"＞菜單實(shí)例＜/td＞

＜font color="red"＞＜!--

上兩行為菜單中顯示的文字，注意這里面的事件觸發(fā)：

onmouseover="menuShow(menu01)"　鼠標(biāo)經(jīng)過(guò)時(shí)顯示菜單；

onmouseout="menuHide(menu01)"　鼠標(biāo)移走時(shí)隱藏菜單。

參數(shù)menu01即要顯示的菜單的id，將在接下來(lái)的代碼中看到。

menuShow與menuHide分別為顯示、隱藏菜單方法，將在后面定義。

--＞＜/font＞

＜td＞ ＜/td＞

＜/tr＞

＜/table＞

＜div style="position:absolute;top:36px;left:20px;display:none;

width:80px;height:100px;background-color:#DDDDDD;" id=menu01

onmouseover="menuShow(this)" onmouseout="menuHide(this)"＞

＜font color="red"＞＜!--

以上三行，定義了菜單的一些屬性，注意“id=menu01”，前面提到過(guò)。

position、top、left、display四個(gè)CSS屬性即上一章講過(guò)的；

width、height、background-color分別為寬度、高度、背景色。

這里再一次出現(xiàn)onmouseover="menuShow(this)" onmouseout="menuHide(this)"，

就是說(shuō)當(dāng)鼠標(biāo)從菜單按鈕上移開(kāi)，如果是移到了菜單上，菜單仍然顯示。

注意這里參數(shù)是this而不是menu01，this即對(duì)象本身，在這里就是指menu01，所以結(jié)果相同。

在這里筆者有意使用this，只是想告訴大家一個(gè)技巧，這在很多時(shí)候非常方便。

--＞＜/font＞

＜br＞ 菜單內(nèi)容

＜/div＞

＜script language=javascript＞

function menuShow(menu) ＜font color="red"＞//定義顯示菜單的方法，參數(shù)menu即菜單的id。＜/font＞

{

menu.style.display='block';

＜font color="red"＞ //注意這里如何用javascript改變style對(duì)象的屬性來(lái)達(dá)到改變CSS屬性的目的。＜/font＞

}

function menuHide(menu) ＜font color="red"＞//定義隱藏菜單的方法，參數(shù)menu即菜單的id。＜/font＞

{

menu.style.display='none';

＜font color="red"＞//同上＜/font＞

}

＜/script＞

＜/body＞

＜/html＞

------------------------------------------------------

這樣，一個(gè)簡(jiǎn)單的菜單就實(shí)現(xiàn)了，只要你略有一些相關(guān)的基礎(chǔ)知識(shí)，反復(fù)體會(huì)一下我加的注釋，就應(yīng)該可以理解了，是不是并不難？

這個(gè)菜單現(xiàn)在看上去還有點(diǎn)簡(jiǎn)陋，下次我們將對(duì)這個(gè)菜單進(jìn)行進(jìn)一步的修飾。

樣式修飾

這一章，我們就來(lái)討論如何美化它。

美化主要表現(xiàn)在鼠標(biāo)放到菜單上后（即鼠標(biāo)懸停）的效果，這里首先介紹幾個(gè)經(jīng)常用到的CSS屬性：

background-color：背景色，其值為一個(gè)顏色值，如“#FF0000”、“red”。

border：邊框樣式，一個(gè)形如“寬度 樣式 顏色”的字符串，如“1px solid red”，即1px的紅色實(shí)線邊框。

cursor：鼠標(biāo)指針樣式，取值為表示鼠標(biāo)指針樣式的字符串，如“hand”、“help”，即小手、幫助狀態(tài)。

以上只是簡(jiǎn)單的介紹了幾個(gè)在此類菜單中非常常見(jiàn)的CSS屬性，這里也并未做很詳盡的解釋（畢竟這些并不是我們要講解的重點(diǎn)），欲了解更多可參閱相關(guān)資料。筆者在這里想說(shuō)的是：掌握更多的CSS屬性會(huì)對(duì)你有所幫助。

前面說(shuō)了，美化主要表現(xiàn)在鼠標(biāo)放到菜單上后的效果，那么如何用JavaScript來(lái)控制樣式的變化呢？或者你會(huì)想到前面講過(guò)的style對(duì)象，的確，用style可以達(dá)到目的，但是，很多時(shí)候，需要改變很多個(gè)CSS屬性，用style就顯得有些麻煩。我們?cè)賮?lái)介紹一個(gè)新的屬性：className。

className屬性對(duì)應(yīng)的就是CSS的class，也即所謂的偽類，比如在某個(gè)標(biāo)記中設(shè)置class=myName，那么這時(shí)該元素的className屬性就是myName。

來(lái)看下面這個(gè)例子：

--------------------------------------------

＜style type="text/css"＞

.style_normal { color: gray; }

.style_over { color: red; }

＜/style＞

＜span onmouseover="this.className='style_over'"

onmouseout="this.className='style_normal'"＞

鼠標(biāo)移上來(lái)，通過(guò)className屬性改變這段文字的class，使文字顏色變成紅色；

移走，又恢復(fù)原來(lái)的顏色。＜/span＞

----------------------------------------------

＜font color="#4c408c"＞效果如下（把鼠標(biāo)放到文字上）：＜/font＞

＜!--#include virtual="http://muchs.cn/imagesnew/software/030804/0.html" --＞

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

講到這里，我想有一定CSS基礎(chǔ)的朋友應(yīng)該已經(jīng)清楚如何來(lái)修飾這個(gè)菜單了，即便你對(duì)CSS了解的還不多，前面已經(jīng)介紹了幾個(gè)較常用的屬性。所以，這里就不再多講了，最后提供兩個(gè)筆者做好的例子，希望你能從中受到啟發(fā)（查看源文件即可看到相應(yīng)的代碼，相應(yīng)位置加了注釋，在此就不另行給出）。

＜font color="#4c408c"＞1. 一個(gè)簡(jiǎn)單的背景變化＜/font＞

＜!--#include virtual="http://www.yesky.com/imagesnew/software/030804/1.html" --＞

＜font color="#4c408c"＞2. 仿Office XP菜單效果＜/font＞

＜!--#include virtual="http://www.yesky.com/imagesnew/software/030804/2.html" --＞

上面兩例都用了灰色，你當(dāng)然可以改成你自己喜歡的顏色。這兩例也是比較常見(jiàn)的效果，這里提供給大家也算是拋磚引玉。相信開(kāi)動(dòng)你的腦筋、合理的運(yùn)用掌握的技術(shù)，會(huì)做出更漂亮的效果！

定位問(wèn)題

通過(guò)前三篇文章的講解，現(xiàn)在我們已經(jīng)可以實(shí)現(xiàn)一個(gè)基本的菜單了。這一章，我們來(lái)討論一下定位的問(wèn)題。

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

在那里我們很方便把就把這個(gè)菜單插入到了網(wǎng)頁(yè)中，而菜單不會(huì)相對(duì)菜單按鈕的位置發(fā)生變化。下面我們就看看如何來(lái)實(shí)現(xiàn)。

在第一章，我們講過(guò)position，當(dāng)它取值absolute的時(shí)候，即絕對(duì)定位。既然是定位，就要有參照物。一般來(lái)講，這個(gè)定位的參照物是body（即整個(gè)網(wǎng)頁(yè)）的左上角，但如果其父級(jí)元素中有設(shè)置了position:absolute的元素，那么它的參照物就是該元素。知道了這樣一個(gè)特性，我們就可以很容易的來(lái)實(shí)現(xiàn)了。

另外，有一點(diǎn)在這里必須要著重說(shuō)明一下，前面同時(shí)也講過(guò)，當(dāng)position的值為relative時(shí)，就是相對(duì)定位，為什么不用它來(lái)實(shí)現(xiàn)呢？我們必須要正確理解這里所謂的相對(duì)定位：它是指相對(duì)于原來(lái)在HTML中的位置所發(fā)生的偏移，而它仍占據(jù)原來(lái)在HTML中所占據(jù)的位置。而我們現(xiàn)在的菜單需要“懸浮”在網(wǎng)頁(yè)元素之上，而這只有當(dāng)position設(shè)為absolute時(shí)才可以做到。

通過(guò)上面的講述，我們應(yīng)該可以大致的了解其實(shí)現(xiàn)的原理了。下面就看看剛才在上面看到的那個(gè)菜單的代碼（注意里面的注釋會(huì)幫你加深理解）。

------------------------------------------------------------

＜style type=text/css＞

td,div { font: normal 12px 宋體; }

a { color: #F8F8F8; text-decoration: none; }

a:hover { color: #F8F8F8; text-decoration: underline; }

＜/style＞

＜div style="background-color:#3366CC;width:68px;text-align:center;

padding:3px;border-bottom:1px solid #FFFFFF;z-index:1;"

onmouseover="myMenu.style.display='block'"

onmouseout="myMenu.style.display='none'"＞

＜!--上面的DIV就是我們看到的按鈕部分，它并未涉及任何定位的部分，

不要與下面兩個(gè)混淆。--＞

＜div style="position:absolute;width:0px;height:0px;overflow:visible;"＞

＜!--注意上面的DIV，設(shè)置了position:absolute，但是并沒(méi)有設(shè)置left/top，

所以這時(shí)它仍與一個(gè)普通的HTML元素一樣，出現(xiàn)在它應(yīng)該出現(xiàn)的位置。--＞

＜div id=myMenu style="position:absolute;left:-10px;top:18px;

display:none;width:90px;background-color:#3366CC;

padding:5px;text-align:left;"＞

＜!--它的定位是相對(duì)于前一個(gè)DIV而不是Body，

因?yàn)榍耙粋€(gè)DIV設(shè)置了position:absolute--＞

＜a href=#none＞Link 1＜/a＞＜br＞

＜a href=#none＞Link 2＜/a＞＜br＞

＜a href=#none＞Link 3＜/a＞＜br＞

＜a＞...＜/a＞＜br＞

＜a href=#none＞Link N＜/a＞＜br＞

＜/div＞

＜/div＞

＜a href=#none＞菜單實(shí)例＜/a＞

＜/div＞

-------------------------------------------

請(qǐng)仔細(xì)理解上面的代碼，相信大家對(duì)用CSS進(jìn)行絕對(duì)定位會(huì)有一個(gè)更深層次的認(rèn)識(shí)！

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

　　評(píng)語(yǔ)：網(wǎng)頁(yè)菜單在網(wǎng)站中是一個(gè)不錯(cuò)的特效，可讓你的網(wǎng)站更具人性化。但這個(gè)效果多用在網(wǎng)站的導(dǎo)航欄目較多的情況下，作為一些小型的網(wǎng)站估計(jì)此特效也是無(wú)用武之地，不過(guò)也可運(yùn)用網(wǎng)頁(yè)菜單的實(shí)現(xiàn)原理開(kāi)發(fā)一些更實(shí)用的網(wǎng)頁(yè)互動(dòng)功能。

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

新聞標(biāo)題：網(wǎng)頁(yè)菜單，讓你的網(wǎng)站更具個(gè)性
文章來(lái)源：http://muchs.cn/news2/311352.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、定制網(wǎng)站、電子商務(wù)、靜態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)