十(shí)天(tiān)學(xué)會web標(biāo)準(zhǔn)div+CSS 下(xià)拉(lā)及多級(jí)彈出菜單(dān)，包(bāo)含以下內容和(hé)知(zhī)識點：
一，帶下拉子菜單的導航菜單 二，絕對定位和浮動的區別和運用 三，css自適應寬度滑動門菜單
一，帶(dài)下拉(lā)子菜單(dān)的導航菜(cài)單(dān)
下拉菜(cài)單(dān)在一些企業網(wǎng)站應(yīng)用尤為廣泛(fàn)，它(tā)存在使(shǐ)用方便，占用(yòng)空間小等特點。之前(qián)縱(zòng)向(xiàng)導航(háng)教程中已(yǐ)使用過二(èr)級導航，今天(tiān)製(zhì)作下橫向導航菜(cài)單的二(èr)級菜(cài)單(dān)，方法和縱(zòng)向一(yī)樣，隻(zhī)不過由縱(zòng)向改變為橫向而已(yǐ)，下麵我(wǒ)們以上(shàng)一章第二(èr)節用(yòng)圖片(piàn)美(měi)化的(dí)橫向(xiàng)導航(háng)中(zhōng)的實(shí)例進行修(xiū)改。
先在(zài)HTML代碼增(zēng)加二級菜(cài)單的(dí)代(dài)碼：
<div id="menu">
<ul>
<li><a id="current" href="#">首頁</a></li>
<li><a href="#">網頁版式</a>
<ul>
<li><a href="#">自(zì)適應寬(kuān)度(dù)</a></li>
<li><a href="#">固定(dìng)寬(kuān)度</a></li>
</ul>
</li>
<li><a href="#">web教(jiào)程(chéng)</a>
<ul>
<li><a href="#">新手入(rù)門</a></li>
<li><a href="#">視頻(pín)教(jiào)程</a></li>
<li><a href="#">常(cháng)見(jiàn)問(wèn)題(tí)</a></li>
</ul>
</li>
<li><a href="#">web實(shí)例</a></li>
<li><a href="#">常用(yòng)代(dài)碼(mǎ)</a></li>
</ul>
</div>
增加完(wán)代碼後，在(zài)瀏(liú)覽器裏(lǐ)預覽一(yī)下：
是不是一(yī)看頭都大(dà)了，怎(zěn)麼(mó)變成這樣了(liǎo)。別(bié)懵，我們(mén)分(fēn)析(xī)一下(xià)錯(cuò)亂(luàn)的原(yuán)因(yīn)。首先我們(mén)看(kàn)下(xià)“自適應寬度(dù)”和(hé)“固(gù)定(dìng)寬度”兩(liǎng)個二(èr)級菜(cài)單也繼承了(liǎo)一級菜單的背景和(hé)橫向排列，所以我們先把二級菜單(dān)的背景(jǐng)和(hé)浮(fú)動(dòng)清(qīng)除掉(diào)，增(zēng)加(jiā)以(yǐ)下(xià)css代碼：
#menu ul li ul li { float:none;}
#menu ul li ul li a { background:none;}
現(xiàn)在(zài)預(yù)覽(lǎn)看下，二(èr)級菜(cài)單是(shì)不(bù)是已(yǐ)經(jīng)歸位了，但鼠(shǔ)標劃(huá)過時還(huán)繼(jì)承(chéng)了一級(jí)菜單(dān)的樣式，所以(yǐ)也改(gǎi)為(wéi)最終效果(guǒ)上(shàng)的黑色背景白(bái)色文(wén)字，還有(yǒu)下拉(lā)菜單的灰色(sè)邊框和灰色(sè)背(bèi)景也(yě)一並加(jiā)上，修改(gǎi)並增(zēng)加如下(xià)代碼：
#menu ul li ul { border:1px solid #ccc;}
#menu ul li ul li { float:none; width:85px; background:#eee; margin:0;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}
第(dì)一行設(shè)置二級菜(cài)單的(dí)灰色(sè)邊(biān)框；為(wéi)了美觀，我(wǒ)們把(bǎ)下(xià)拉菜(cài)單的寬度(dù)設(shè)置成和(hé)一(yī)級菜(cài)單寬度(dù)相(xiāng)同，第(dì)二行的(dí)width:85px再加(jiā)上第(dì)一(yī)行上設置(zhì)的邊(biān)框左右各(gè)1px後正好(hǎo)是(shì)87px，和(hé)一級(jí)菜(cài)單(dān)寬度(dù)相同(tóng)。margin:0是為(wéi)了清除掉(diào)繼(jì)承(chéng)一級菜單(dān)中margin-left:2px；最後一行設置(zhì)鼠(shǔ)標劃過時的樣式(shì)。
再(zài)預覽(lǎn)一下(xià)，是不(bù)是基(jī)本的(dí)樣式已(yǐ)實現了。
下(xià)一(yī)步就(jiù)該把二級菜(cài)單(dān)隱藏，當(dāng)鼠(shǔ)標(biāo)劃過時顯示(shì)出來(lái)了。增加如下(xià)代碼：
#menu ul li ul { display:none; border:1px solid #ccc;}
#menu ul li:hover ul { display:block;}
注意(yì)第(dì)二(èr)行的寫(xiě)法，#menu ul li:hover ul這個(gè)樣(yàng)比較難理解(jiě)，它(tā)的意思是(shì)定(dìng)義(yì)當鼠標(biāo)劃過(guò)#menu下(xià)ul下(xià)li時，li下的(dí)ul的(dí)樣式（有(yǒu)點(diǎn)饒舌），這裏設(shè)置為display:block，意思(sī)是(shì)鼠(shǔ)標劃過(guò)時(shí)顯示(shì)這(zhè)塊內(nèi)容(róng)。開始隱藏，鼠標劃過時(shí)顯(xiǎn)示， 這(zhè)就實現了我們想要的效(xiào)果(guǒ)。目前IE6隻(zhī)支持a的偽類，其(qí)它(tā)標簽的(dí)偽類不支(zhī)持，所以(yǐ)要想在IE6下(xià)也顯(xiǎn)示(shì)正(zhèng)確(què)，需(xū)要(yào)借助js來(lái)實(shí)現。我(wǒ)們(mén)定義(yì)一個(gè)類(lèi).sfhover（自(zì)己(jǐ)命(mìng)名，需和JS中相(xiāng)同）的(dí)屬性為display:block;然(rán)後(hòu)當(dāng)鼠(shǔ)標(biāo)劃(huá)過(guò)後，用(yòng)JS給(gěi)當(dāng)前li添(tiān)加上(shàng)這個(gè)樣式上，根(gēn)據(jù)css的(dí)優(yōu)先級：指(zhǐ)定的高於(yú)繼承的(dí)原(yuán)則，就實現了(liǎo)IE6下的正確顯(xiǎn)示。所(suǒ)以增加如(rú)下代(dài)碼(mǎ)：
#menu ul li.sfhover ul { display:block;}
認(rèn)真(zhēn)跟(gēn)著(zhuó)教(jiào)程製作的朋(péng)友(yǒu)可能(néng)已經發現，現(xiàn)在(zài)應用(yòng)的(dí)JS和(hé)縱向(xiàng)導(dǎo)航時(shí)應(yīng)用的不樣(yàng)，但最(zuì)終實現的(dí)效果(guǒ)是(shì)一(yī)樣的。同(tóng)理css在布局(jú)網站時，也(yě)是可以多種方法的，正(zhèng)所(suǒ)謂條(tiáo)條大道通(tōng)羅(luó)馬，希望大家舉(jǔ)一反三，加深前麵(miàn)教(jiào)程(chéng)的掌(zhǎng)握。JS部分(fēn)本例不做講解，如果(guǒ)你想弄(nòng)清楚(chǔ)JS是(shì)如何實現的，請學習js相(xiāng)關內(nèi)容。到(dào)這(zhè)裏，本例(lì)就(jiù)基本完(wán)成了(liǎo)，還(huán)有(yǒu)一個問題是(shì)當(dāng)前導航下有內容(róng)的(dí)話(huà)，如果二(èr)級(jí)菜單(dān)顯(xiǎn)示(shì)，將會把(bǎ)下邊的(dí)內容(róng)擠跑，所以需要(yào)給#menu ul li ul增加(jiā)position:absolute;屬性，當(dāng)其絕(jué)對定位後，它(tā)將(jiāng)脫離(lí)原來文(wén)檔流(liú)，不再(zài)占(zhān)據(jù)空(kōng)間，因(yīn)此也不會再把下邊內(nèi)容擠跑(pǎo)了(liǎo)。完整(zhěng)的(dí)預覽(lǎn)代碼如(rú)下(xià)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(http://www.100181.com/upload/2010-06/27/nav_bg2.gif) 0 0 no-repeat; font-size:14px;}
#menu ul li a:hover { background:url(http://www.100181.com/upload/2010-06/27/nav_bg3.gif) 0 0 no-repeat;}
#menu ul li a#current { background:url(http://www.100181.com/upload/2010-06/27/nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}
#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}
#menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}
#menu ul li:hover ul { display:block;}
#menu ul li.sfhover ul { display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="current" href="#">首(shǒu)頁</a></li>
<li><a href="#">網頁版式</a>
<ul>
<li><a href="#">自適(shì)應寬(kuān)度(dù)</a></li>
<li><a href="#">固定寬度(dù)</a></li>
</ul>
</li>
<li><a href="#">web教(jiào)程(chéng)</a>
<ul>
<li><a href="#">新手入門(mén)</a></li>
<li><a href="#">視頻(pín)教程</a></li>
<li><a href="#">常(cháng)見(jiàn)問(wèn)題</a></li>
</ul>
</li>
<li><a href="#">web實例</a></li>
<li><a href="#">常用代(dài)碼</a></li>
</ul>
</div>
</body>
</html>
提示：可(kě)以(yǐ)先修改部分代(dài)碼(mǎ)後(hòu)再運行
二，絕(jué)對(duì)定位和浮(fú)動(dòng)的(dí)區別和運用
學(xué)習(xí)到現(xiàn)在(zài)，定位和浮(fú)動也都涉及(jí)到(dào)了(liǎo)，但有些(xiē)朋友(yǒu)可(kě)能還(huán)在(zài)迷惑(huò)，兩者都(dū)可(kě)以分欄(lán)布局，到底(dǐ)什麼時候用(yòng)浮動(dòng)，什麼(mó)時(shí)候用定位(wèi)呢？
當一個元素(sù)使用絕(jué)對(duì)定(dìng)位後(hòu)，它(tā)的位置將依(yī)據(jù)瀏(liú)覽(lǎn)器左(zuǒ)上(shàng)角(jiǎo)開始計算(suàn)或(huò)相對於父(fù)容器（在父容器(qì)使用(yòng)相對定(dìng)位時）。 絕(jué)對定(dìng)位使元素脫離文(wén)檔流，因此不(bù)占(zhān)據空間。普通文檔流中元素(sù)的布局就當(dāng)絕對定(dìng)位(wèi)的(dí)元素不存在(zài)時一樣。因(yīn)為絕(jué)對(duì)定位(wèi)的框(kuàng)與文檔流無關，所(suǒ)以(yǐ)它(tā)們可以覆(fù)蓋(gài)頁(yè)麵上(shàng)的其他元(yuán)素。
而(ér)浮動元素(sù)的(dí)定位還是基於正(zhèng)常的(dí)文(wén)檔(dàng)流，然後(hòu)從文(wén)檔(dàng)流中抽(chōu)出並盡(jìn)可能(néng)遠的(dí)移動(dòng)至(zhì)左(zuǒ)側(cè)或者(zhě)右側。文(wén)字(zì)內(nèi)容(róng)會(huì)圍繞在浮動元素周(zhōu)圍(wéi)。當一(yī)個元素從正(zhèng)常(cháng)文(wén)檔(dàng)流(liú)中(zhōng)抽(chōu)出後(hòu)，仍然在文檔流(liú)中的(dí)其(qí)他(tā)元素將忽(hū)略該(gāi)元素並(bìng)填補他原(yuán)先的空(kōng)間。它(tā)隻是改變了(liǎo)文(wén)檔流的顯示，而沒(méi)有脫離(lí)文(wén)檔流(liú)，理(lǐ)解了這(zhè)一點(diǎn)，就(jiù)很(hěn)容易弄(nòng)明白什麼時候用定位，什麼時候用浮動了(liǎo)。
一個元(yuán)素(sù)浮(fú)動或絕對(duì)定(dìng)位後，它(tā)將自動轉(zhuǎn)換(huàn)為塊(kuài)級元素(sù)，而不(bù)論該元素本身(shēn)是(shì)什麼類型。
三(sān)， css自(zì)適應寬(kuān)度(dù)滑(huá)動門菜(cài)單
CSS自(zì)適(shì)應寬(kuān)度(dù)菜(cài)單(dān)指菜(cài)單的寬度可以(yǐ)隨著內容(róng)的(dí)增(zēng)加(jiā)而(ér)變寬，就拿上(shàng)邊的實(shí)例來說(shuō)，是(shì)按4個(gè)字的寬度來設計(jì)的，如果(guǒ)其(qí)中一(yī)項(xiàng)為5個(gè)字(zì)或更多，就放(fàng)不(bù)下了。那麼(mó)我(wǒ)們(mén)就需(xū)要讓它(tā)的(dí)寬度(dù)可(kě)以(yǐ)隨(suí)著(zhuó)內容的(dí)增(zēng)減(jiǎn)而變化(huà)，這(zhè)就是(shì)css自(zì)適應寬(kuān)度(dù)菜單。下麵我們(mén)講一下(xià)自適應寬度按鈕，和(hé)菜單(dān)原(yuán)理(lǐ)是一樣，因為自(zì)適應寬度菜(cài)單(dān)在《新(xīn)手常見問題》中(zhōng)已(yǐ)經(jīng)講(jiǎng)過了(liǎo)，如果(guǒ)學會自適(shì)應按鈕，你還(huán)不(bù)會(huì)製作自適應(yīng)菜(cài)單(dān)的(dí)話，請閱(yuè)讀http://www.100181.com/div_css/898.shtml。
你是否還(huán)記得在(zài)第五章時(shí)學習的(dí)css按鈕實(shí)例(lì)（如(rú)下圖），當時(shí)隻做(zuò)了(liǎo)一(yī)個按鈕，它這裏是三個(gè)按(àn)鈕，而(ér)且(qiě)寬度不(bù)一樣(yàng)，今(jīn)天(tiān)我(wǒ)們還以(yǐ)這個(gè)按(àn)鈕(niǔ)為(wéi)基礎，製作(zuò)寬度自應適應的(dí)按鈕。
那麼它的(dí)實現原來(lái)是什麼(mó)？我(wǒ)們(mén)看下邊(biān)一(yī)張圖。要想實(shí)現自(zì)適(shì)應寬(kuān)度(dù)，需(xū)要(yào)在文字(zì)上增加(jiā)一個輔(fǔ)助(zhù)標簽，如span，分別在a上(shàng)和span上設置背(bèi)景，一個左(zuǒ)側對齊，一(yī)個(gè)右(yòu)側對齊(qí)，如(rú)下的原(yuán)理圖，
四條輔助綫內為一(yī)個(gè)按鈕元素(sù)，綠(lǜ)色部(bù)分為span，然後定義它的背景(jǐng)圖(tú)片(piàn)靠右側(cè)對齊，而左(zuǒ)側的部分為a的(dí)背景(jǐng)圖(tú)片(piàn)，定義(yì)靠(kào)左側對齊。當文字多(duō)時(shí)，會把(bǎ)span撐(chēng)開(kāi)，這實(shí)現(xiàn)了(liǎo)自(zì)適(shì)應寬度的(dí)按鈕了(liǎo)。這裏需要一張如下的圖片，它的(dí)寬度要寬於(yú)你所(suǒ)應用(yòng)的(dí)最(zuì)寬寬度(dù)，這樣才(cái)能(néng)顯示(shì)正常，同(tóng)時根據(jù)以前學習的css Sprites技術(shù)，把背景圖片(piàn)和鼠標(biāo)經過(guò)圖片(piàn)放(fàng)到一張(zhāng)圖片上。
拿第(dì)五(wǔ)章(zhāng)css按(àn)鈕的例(lì)子(zǐ)代碼進行修(xiū)改，先改(gǎi)為背景圖(tú)片使用(yòng)上圖，再(zài)增加兩個(gè)字數(shù)不等(děng)按鈕，並在文字上增(zēng)加(jiā)span標簽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }
a:hover { background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px -37px;}
</style>
</head>
<body>
<p><a href="#"><span>免費(fèi)注(zhù)冊</span></a><a href="#"><span>登錄</span></a><a href="#"><span>在(zài)淘(táo)寶網上開店</span></a></p>
</body>
</html>
提(tí)示(shì)：可以先修改部(bù)分代碼(mǎ)後再(zài)運行
預覽顯示(shì)效(xiào)果(guǒ)如下所示(shì)，因(yīn)背景(jǐng)圖片比較(jiào)長，所以右(yòu)側顯(xiǎn)示不太(tài)友(yǒu)好，下一(yī)步就(jiù)需(xū)要(yào)把(bǎ)a的寬度(dù)給(gěi)去(qù)掉(diào)，設(shè)置(zhì)span的背景，使右側顯示正(zhèng)常，另外把(bǎ)三個(gè)按(àn)鈕(niǔ)橫向排(pái)列
在a上增(zēng)加如下(xià)代碼(mǎ)：
float:left; margin:5px;
橫(héng)向排列，並增加5px的(dí)外邊距，現在(zài)看(kàn)下效(xiào)果吧(bā)。為了(liǎo)美觀(guān)，下(xià)一步(bù)需要(yào)a的(dí)左側(cè)增加填(tián)充，使文字不死貼(tiē)左側(cè)，同(tóng)理span右側(cè)需(xū)要(yào)增加一(yī)個同樣(yàng)的填充。
a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; }
a span { display:block; background: url(btn_bg.gif) no-repeat right 0px; padding-right:20px;}
a:hover { background: url(btn_bg.gif) no-repeat 0px -37px;}
a:hover span{ background: url(btn_bg.gif) no-repeat right -37px;}
對(duì)比(bǐ)以(yǐ)上代碼(mǎ)，可能你已(yǐ)經(jīng)發現，原(yuán)來a頂部的(dí)3px給(gěi)去(qù)掉(diào)了，把高(gāo)度改(gǎi)為37px了，行(háng)高(gāo)也改(gǎi)為37px了，為什麼(mó)這麼(mó)做，大(dà)家動(dòng)手試(shì)下(xià)就明(míng)白(bái)了(liǎo)。然(rán)後(hòu)設置(zhì)a下span的(dí)背景(jǐng)圖片(piàn)，span默認是(shì)內聯元素(sù)，所以(yǐ)需先轉(zhuǎn)換(huàn)為塊(kuài)級(jí)元素(sù)；另外需(xū)增加鼠(shǔ)標經過時(shí)span的樣式。顯示效果如下，對比一下實例(lì)圖，是(shì)不是實(shí)現(xiàn)了(liǎo)這樣的(dí)效(xiào)果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; }
a span { display:block; background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat right 0px; padding-right:20px;}
a:hover { background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px -37px;}
a:hover span{ background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat right -37px;}
</style>
</head>
<body>
<p><a href="#"><span>免費(fèi)注(zhù)冊</span></a><a href="#"><span>登(dēng)錄(lù)</span></a><a href="#"><span>在淘(táo)寶(bǎo)網上(shàng)開店</span></a></p>
</body>
</html>
提示：可以先修改部分代碼後再運行
文(wén)章出處(chǔ)：標準(zhǔn)之路 編(biān)輯：楊雨(yǔ)晨(chén)思
轉載請(qǐng)保(bǎo)留原(yuán)文(wén)地址: https://antelcom.cn/show-336.html