十天學(xué)會web標(biāo)準(zhǔn)div+CSS 下拉及多級彈出菜單,包含以下內(nèi)容和知識點(diǎn):
一、帶下拉子菜單的導(dǎo)航菜單 二、絕對定位和浮動的區(qū)別和運(yùn)用 三、css自適應(yīng)寬度滑動門菜單
一、帶下拉子菜單的導(dǎo)航菜單
下拉菜單在一些企業(yè)網(wǎng)站應(yīng)用尤為廣泛,它存在使用方便,占用空間小等特點(diǎn)。之前縱向?qū)Ш浇坛讨幸咽褂眠^二級導(dǎo)航,今天制作下橫向?qū)Ш讲藛蔚亩壊藛危椒ê涂v向一樣,只不過由縱向改變?yōu)闄M向而已,下面我們以上一章第二節(jié)用圖片美化的橫向?qū)Ш街械膶?shí)例進(jìn)行修改。
先在HTML代碼增加二級菜單的代碼:
<div id="menu">
<ul>
<li><a id="current" href="#">首頁</a></li>
<li><a href="#">網(wǎng)頁版式</a>
<ul>
<li><a href="#">自適應(yīng)寬度</a></li>
<li><a href="#">固定寬度</a></li>
</ul>
</li>
<li><a href="#">web教程</a>
<ul>
<li><a href="#">新手入門</a></li>
<li><a href="#">視頻教程</a></li>
<li><a href="#">常見問題</a></li>
</ul>
</li>
<li><a href="#">web實(shí)例</a></li>
<li><a href="#">常用代碼</a></li>
</ul>
</div>
增加完代碼后,在瀏覽器里預(yù)覽一下:
是不是一看頭都大了,怎么變成這樣了。別懵,我們分析一下錯亂的原因。首先我們看下“自適應(yīng)寬度”和“固定寬度”兩個二級菜單也繼承了一級菜單的背景和橫向排列,所以我們先把二級菜單的背景和浮動清除掉,增加以下css代碼:
#menu ul li ul li { float:none;}
#menu ul li ul li a { background:none;}
現(xiàn)在預(yù)覽看下,二級菜單是不是已經(jīng)歸位了,但鼠標(biāo)劃過時還繼承了一級菜單的樣式,所以也改為最終效果上的黑色背景白色文字,還有下拉菜單的灰色邊框和灰色背景也一并加上,修改并增加如下代碼:
#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;}
第一行設(shè)置二級菜單的灰色邊框;為了美觀,我們把下拉菜單的寬度設(shè)置成和一級菜單寬度相同,第二行的width:85px再加上第一行上設(shè)置的邊框左右各1px后正好是87px,和一級菜單寬度相同。margin:0是為了清除掉繼承一級菜單中margin-left:2px;最后一行設(shè)置鼠標(biāo)劃過時的樣式。
再預(yù)覽一下,是不是基本的樣式已實(shí)現(xiàn)了。
下一步就該把二級菜單隱藏,當(dāng)鼠標(biāo)劃過時顯示出來了。增加如下代碼:
#menu ul li ul { display:none; border:1px solid #ccc;}
#menu ul li:hover ul { display:block;}
注意第二行的寫法,#menu ul li:hover ul這個樣比較難理解,它的意思是定義當(dāng)鼠標(biāo)劃過#menu下ul下li時,li下的ul的樣式(有點(diǎn)饒舌),這里設(shè)置為display:block,意思是鼠標(biāo)劃過時顯示這塊內(nèi)容。開始隱藏,鼠標(biāo)劃過時顯示, 這就實(shí)現(xiàn)了我們想要的效果。目前IE6只支持a的偽類,其它標(biāo)簽的偽類不支持,所以要想在IE6下也顯示正確,需要借助js來實(shí)現(xiàn)。我們定義一個類.sfhover(自己命名,需和JS中相同)的屬性為display:block;然后當(dāng)鼠標(biāo)劃過后,用JS給當(dāng)前l(fā)i添加上這個樣式上,根據(jù)css的優(yōu)先級:指定的高于繼承的原則,就實(shí)現(xiàn)了IE6下的正確顯示。所以增加如下代碼:
#menu ul li.sfhover ul { display:block;}
認(rèn)真跟著教程制作的朋友可能已經(jīng)發(fā)現(xiàn),現(xiàn)在應(yīng)用的JS和縱向?qū)Ш綍r應(yīng)用的不樣,但最終實(shí)現(xiàn)的效果是一樣的。同理css在布局網(wǎng)站時,也是可以多種方法的,正所謂條條大道通羅馬,希望大家舉一反三,加深前面教程的掌握。JS部分本例不做講解,如果你想弄清楚JS是如何實(shí)現(xiàn)的,請學(xué)習(xí)js相關(guān)內(nèi)容。到這里,本例就基本完成了,還有一個問題是當(dāng)前導(dǎo)航下有內(nèi)容的話,如果二級菜單顯示,將會把下邊的內(nèi)容擠跑,所以需要給#menu ul li ul增加position:absolute;屬性,當(dāng)其絕對定位后,它將脫離原來文檔流,不再占據(jù)空間,因此也不會再把下邊內(nèi)容擠跑了。完整的預(yù)覽代碼如下:
<!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=gb2312" />
<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="#">首頁</a></li>
<li><a href="#">網(wǎng)頁版式</a>
<ul>
<li><a href="#">自適應(yīng)寬度</a></li>
<li><a href="#">固定寬度</a></li>
</ul>
</li>
<li><a href="#">web教程</a>
<ul>
<li><a href="#">新手入門</a></li>
<li><a href="#">視頻教程</a></li>
<li><a href="#">常見問題</a></li>
</ul>
</li>
<li><a href="#">web實(shí)例</a></li>
<li><a href="#">常用代碼</a></li>
</ul>
</div>
</body>
</html>
提示:可以先修改部分代碼后再運(yùn)行
二、絕對定位和浮動的區(qū)別和運(yùn)用
學(xué)習(xí)到現(xiàn)在,定位和浮動也都涉及到了,但有些朋友可能還在迷惑,兩者都可以分欄布局,到底什么時候用浮動,什么時候用定位呢?
當(dāng)一個元素使用絕對定位后,它的位置將依據(jù)瀏覽器左上角開始計算或相對于父容器(在父容器使用相對定位時)。 絕對定位使元素脫離文檔流,因此不占據(jù)空間。普通文檔流中元素的布局就當(dāng)絕對定位的元素不存在時一樣。因?yàn)榻^對定位的框與文檔流無關(guān),所以它們可以覆蓋頁面上的其他元素。
而浮動元素的定位還是基于正常的文檔流,然后從文檔流中抽出并盡可能遠(yuǎn)的移動至左側(cè)或者右側(cè)。文字內(nèi)容會圍繞在浮動元素周圍。當(dāng)一個元素從正常文檔流中抽出后,仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間。它只是改變了文檔流的顯示,而沒有脫離文檔流,理解了這一點(diǎn),就很容易弄明白什么時候用定位,什么時候用浮動了。
一個元素浮動或絕對定位后,它將自動轉(zhuǎn)換為塊級元素,而不論該元素本身是什么類型。
三、 css自適應(yīng)寬度滑動門菜單
CSS自適應(yīng)寬度菜單指菜單的寬度可以隨著內(nèi)容的增加而變寬,就拿上邊的實(shí)例來說,是按4個字的寬度來設(shè)計的,如果其中一項(xiàng)為5個字或更多,就放不下了。那么我們就需要讓它的寬度可以隨著內(nèi)容的增減而變化,這就是css自適應(yīng)寬度菜單。下面我們講一下自適應(yīng)寬度按鈕,和菜單原理是一樣,因?yàn)樽赃m應(yīng)寬度菜單在《新手常見問題》中已經(jīng)講過了,如果學(xué)會自適應(yīng)按鈕,你還不會制作自適應(yīng)菜單的話,請閱讀http://www.100181.com/div_css/898.shtml。
你是否還記得在第五章時學(xué)習(xí)的css按鈕實(shí)例(如下圖),當(dāng)時只做了一個按鈕,它這里是三個按鈕,而且寬度不一樣,今天我們還以這個按鈕為基礎(chǔ),制作寬度自應(yīng)適應(yīng)的按鈕。
那么它的實(shí)現(xiàn)原來是什么?我們看下邊一張圖。要想實(shí)現(xiàn)自適應(yīng)寬度,需要在文字上增加一個輔助標(biāo)簽,如span,分別在a上和span上設(shè)置背景,一個左側(cè)對齊,一個右側(cè)對齊,如下的原理圖,
四條輔助線內(nèi)為一個按鈕元素,綠色部分為span,然后定義它的背景圖片靠右側(cè)對齊,而左側(cè)的部分為a的背景圖片,定義靠左側(cè)對齊。當(dāng)文字多時,會把span撐開,這實(shí)現(xiàn)了自適應(yīng)寬度的按鈕了。這里需要一張如下的圖片,它的寬度要寬于你所應(yīng)用的最寬寬度,這樣才能顯示正常,同時根據(jù)以前學(xué)習(xí)的css Sprites技術(shù),把背景圖片和鼠標(biāo)經(jīng)過圖片放到一張圖片上。
拿第五章css按鈕的例子代碼進(jìn)行修改,先改為背景圖片使用上圖,再增加兩個字?jǐn)?shù)不等按鈕,并在文字上增加span標(biā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=gb2312" />
<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)注冊</span></a><a href="#"><span>登錄</span></a><a href="#"><span>在淘寶網(wǎng)上開店</span></a></p>
</body>
</html>
提示:可以先修改部分代碼后再運(yùn)行
預(yù)覽顯示效果如下所示,因背景圖片比較長,所以右側(cè)顯示不太友好,下一步就需要把a(bǔ)的寬度給去掉,設(shè)置span的背景,使右側(cè)顯示正常,另外把三個按鈕橫向排列
在a上增加如下代碼:
float:left; margin:5px;
橫向排列,并增加5px的外邊距,現(xiàn)在看下效果吧。為了美觀,下一步需要a的左側(cè)增加填充,使文字不死貼左側(cè),同理span右側(cè)需要增加一個同樣的填充。
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;}
對比以上代碼,可能你已經(jīng)發(fā)現(xiàn),原來a頂部的3px給去掉了,把高度改為37px了,行高也改為37px了,為什么這么做,大家動手試下就明白了。然后設(shè)置a下span的背景圖片,span默認(rèn)是內(nèi)聯(lián)元素,所以需先轉(zhuǎn)換為塊級元素;另外需增加鼠標(biāo)經(jīng)過時span的樣式。顯示效果如下,對比一下實(shí)例圖,是不是實(shí)現(xiàn)了這樣的效果。
<!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=gb2312" />
<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)注冊</span></a><a href="#"><span>登錄</span></a><a href="#"><span>在淘寶網(wǎng)上開店</span></a></p>
</body>
</html>
提示:可以先修改部分代碼后再運(yùn)行
文章出處:標(biāo)準(zhǔn)之路 編輯:楊雨晨思
轉(zhuǎn)載請保留原文地址: http://m.448gfe.cn/show-336.html