客服
下拉及多級(jí)彈出菜單-Web標(biāo)準(zhǔn)(div+css)教程
今天我們開始學(xué)習(xí)《十天學(xué)會(huì)web標(biāo)準(zhǔn)(div+css)》的下拉及多級(jí)彈出菜單，包含以下內(nèi)容和知識(shí)點(diǎn)：
一、帶下拉子菜單的導(dǎo)航菜單
二、絕對(duì)定位和浮動(dòng)的區(qū)別和運(yùn)用
三、css自適應(yīng)寬度滑動(dòng)門菜單
一、帶下拉子菜單的導(dǎo)航菜單
下拉菜單在一些企業(yè)網(wǎng)站應(yīng)用尤為廣泛，它存在使用方便，占用空間小等特點(diǎn)。之前縱向?qū)Ш浇坛讨幸咽褂眠^(guò)二級(jí)導(dǎo)航，今天制作下橫向?qū)Ш讲藛蔚亩?jí)菜單，方法和縱向一樣，只不過(guò)由縱向改變?yōu)闄M向而已，下面我們以上一章第二節(jié)用圖片美化的橫向?qū)Ш街械膶?shí)例進(jìn)行修改。西安網(wǎng)站建設(shè)推薦閱讀>>> div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)布局實(shí)例教程-Web標(biāo)準(zhǔn)(div+css)教程，
先在html代碼增加二級(jí)菜單的代碼：
<div id="menu">
<ul>
<li><a id="current" href="#">首頁(yè)</a></li>
<li><a href="#">網(wǎng)頁(yè)版式</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="#">常見問(wèn)題</a></li>
</ul>
</li>
<li><a href="#">web實(shí)例</a></li>
<li><a href="#">常用代碼</a></li>
</ul>
</div>
增加完代碼后，在瀏覽器里預(yù)覽一下：
是不是一看頭都大了，怎么變成這樣了。別懵，我們分析一下錯(cuò)亂的原因。首先我們看下“自適應(yīng)寬度”和“固定寬度”兩個(gè)二級(jí)菜單也繼承了一級(jí)菜單的背景和橫向排列，所以我們先把二級(jí)菜單的背景和浮動(dòng)清除掉，增加以下css代碼：
#menu ul li ul li { float:none;}
#menu ul li ul li a { background:none;}
現(xiàn)在預(yù)覽看下，二級(jí)菜單是不是已經(jīng)歸位了，但鼠標(biāo)劃過(guò)時(shí)還繼承了一級(jí)菜單的樣式，所以也改為最終效果上的黑色背景白色文字，還有下拉菜單的灰色邊框和灰色背景也一并加上，修改并增加如下代碼：
#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è)置二級(jí)菜單的灰色邊框；為了美觀，我們把下拉菜單的寬度設(shè)置成和一級(jí)菜單寬度相同，第二行的width:85px再加上第一行上設(shè)置的邊框左右各1px后正好是87px，和一級(jí)菜單寬度相同。margin:0是為了清除掉繼承一級(jí)菜單中margin-left:2px；最后一行設(shè)置鼠標(biāo)劃過(guò)時(shí)的樣式。西安網(wǎng)站建設(shè)推薦閱讀>>> css表單設(shè)計(jì)-Web標(biāo)準(zhǔn)(div+css)教程，
再預(yù)覽一下，是不是基本的樣式已實(shí)現(xiàn)了。
下一步就該把二級(jí)菜單隱藏，當(dāng)鼠標(biāo)劃過(guò)時(shí)顯示出來(lái)了。增加如下代碼：
#menu ul li ul { display:none; border:1px solid #ccc;}
#menu ul li:hover ul { display:block;}
注意第二行的寫法，#menu ul li:hover ul這個(gè)樣比較難理解，它的意思是定義當(dāng)鼠標(biāo)劃過(guò)#menu下ul下li時(shí)，li下的ul的樣式（有點(diǎn)饒舌），這里設(shè)置為display:block，意思是鼠標(biāo)劃過(guò)時(shí)顯示這塊內(nèi)容。開始隱藏，鼠標(biāo)劃過(guò)時(shí)顯示， 這就實(shí)現(xiàn)了我們想要的效果。目前IE6只支持a的偽類，其它標(biāo)簽的偽類不支持，所以要想在IE6下也顯示正確，需要借助js來(lái)實(shí)現(xiàn)。我們定義一個(gè)類.sfhover（自己命名，需和JS中相同）的屬性為display:block;然后當(dāng)鼠標(biāo)劃過(guò)后，用JS給當(dāng)前l(fā)i添加上這個(gè)樣式上，根據(jù)css的優(yōu)先級(jí)：指定的高于繼承的原則，就實(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(shí)應(yīng)用的不樣，但最終實(shí)現(xiàn)的效果是一樣的。同理css在布局網(wǎng)站時(shí)，也是可以多種方法的，正所謂條條大道通羅馬，希望大家舉一反三，加深前面教程的掌握。JS部分本例不做講解，如果你想弄清楚JS是如何實(shí)現(xiàn)的，請(qǐng)學(xué)習(xí)js相關(guān)內(nèi)容。到這里，本例就基本完成了，還有一個(gè)問(wèn)題是當(dāng)前導(dǎo)航下有內(nèi)容的話，如果二級(jí)菜單顯示，將會(huì)把下邊的內(nèi)容擠跑，所以需要給#menu ul li ul增加position:absolute;屬性，當(dāng)其絕對(duì)定位后，它將脫離原來(lái)文檔流，不再占據(jù)空間，因此也不會(huì)再把下邊內(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.aa25.cn/upload/2010-06/27/nav_bg2.gif) 0 0 no-repeat; font-size:14px;} #menu ul li a:hover { background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg3.gif) 0 0 no-repeat;} #menu ul li a#current { background:url(http://www.aa25.cn/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="#">首頁(yè)</a></li> <li><a href="#">網(wǎng)頁(yè)版式</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="#">常見問(wèn)題</a></li> </ul> </li> <li><a href="#">web實(shí)例</a></li> <li><a href="#">常用代碼</a></li> </ul> </div> </body> </html> |
提示：可以先修改部分代碼后再運(yùn)行
二、絕對(duì)定位和浮動(dòng)的區(qū)別和運(yùn)用
學(xué)習(xí)到現(xiàn)在，定位和浮動(dòng)也都涉及到了，但有些朋友可能還在迷惑，兩者都可以分欄布局，到底什么時(shí)候用浮動(dòng)，什么時(shí)候用定位呢？
當(dāng)一個(gè)元素使用絕對(duì)定位后，它的位置將依據(jù)瀏覽器左上角開始計(jì)算或相對(duì)于父容器（在父容器使用相對(duì)定位時(shí)）。 絕對(duì)定位使元素脫離文檔流，因此不占據(jù)空間。普通文檔流中元素的布局就當(dāng)絕對(duì)定位的元素不存在時(shí)一樣。因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其他元素。
而浮動(dòng)元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠(yuǎn)的移動(dòng)至左側(cè)或者右側(cè)。文字內(nèi)容會(huì)圍繞在浮動(dòng)元素周圍。當(dāng)一個(gè)元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間。它只是改變了文檔流的顯示，而沒有脫離文檔流，理解了這一點(diǎn)，就很容易弄明白什么時(shí)候用定位，什么時(shí)候用浮動(dòng)了。西安網(wǎng)站建設(shè)推薦閱讀>>> 淺析網(wǎng)站開發(fā)css架構(gòu)，
一個(gè)元素浮動(dòng)或絕對(duì)定位后，它將自動(dòng)轉(zhuǎn)換為塊級(jí)元素，而不論該元素本身是什么類型。
三、 css自適應(yīng)寬度滑動(dòng)門菜單
CSS自適應(yīng)寬度菜單指菜單的寬度可以隨著內(nèi)容的增加而變寬，就拿上邊的實(shí)例來(lái)說(shuō)，是按4個(gè)字的寬度來(lái)設(shè)計(jì)的，如果其中一項(xiàng)為5個(gè)字或更多，就放不下了。那么我們就需要讓它的寬度可以隨著內(nèi)容的增減而變化，這就是css自適應(yīng)寬度菜單。下面我們講一下自適應(yīng)寬度按鈕，和菜單原理是一樣，因?yàn)樽赃m應(yīng)寬度菜單在《新手常見問(wèn)題》中已經(jīng)講過(guò)了，如果學(xué)會(huì)自適應(yīng)按鈕，你還不會(huì)制作自適應(yīng)菜單的話，請(qǐng)閱讀http://www.aa25.cn/div_css/898.shtml。
你是否還記得在第五章時(shí)學(xué)習(xí)的css按鈕實(shí)例（如下圖），當(dāng)時(shí)只做了一個(gè)按鈕，它這里是三個(gè)按鈕，而且寬度不一樣，今天我們還以這個(gè)按鈕為基礎(chǔ)，制作寬度自應(yīng)適應(yīng)的按鈕。
那么它的實(shí)現(xiàn)原來(lái)是什么？我們看下邊一張圖。要想實(shí)現(xiàn)自適應(yīng)寬度，需要在文字上增加一個(gè)輔助標(biāo)簽，如span，分別在a上和span上設(shè)置背景，一個(gè)左側(cè)對(duì)齊，一個(gè)右側(cè)對(duì)齊，如下的原理圖，
四條輔助線內(nèi)為一個(gè)按鈕元素，綠色部分為span，然后定義它的背景圖片靠右側(cè)對(duì)齊，而左側(cè)的部分為a的背景圖片，定義靠左側(cè)對(duì)齊。當(dāng)文字多時(shí)，會(huì)把span撐開，這實(shí)現(xiàn)了自適應(yīng)寬度的按鈕了。這里需要一張如下的圖片，它的寬度要寬于你所應(yīng)用的最寬寬度，這樣才能顯示正常，同時(shí)根據(jù)以前學(xué)習(xí)的css Sprites技術(shù)，把背景圖片和鼠標(biāo)經(jīng)過(guò)圖片放到一張圖片上。
拿第五章css按鈕的例子代碼進(jìn)行修改，先改為背景圖片使用上圖，再增加兩個(gè)字?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)注冊(cè)</span></a><a href="#"><span>登錄</span></a><a href="#"><span>在淘寶網(wǎng)上開店</span></a></p> </body> </html> |
提示：可以先修改部分代碼后再運(yùn)行
預(yù)覽顯示效果如下所示，因背景圖片比較長(zhǎng)，所以右側(cè)顯示不太友好，下一步就需要把a(bǔ)的寬度給去掉，設(shè)置span的背景，使右側(cè)顯示正常，另外把三個(gè)按鈕橫向排列
在a上增加如下代碼：
float:left; margin:5px;
橫向排列，并增加5px的外邊距，現(xiàn)在看下效果吧。為了美觀，下一步需要a的左側(cè)增加填充，使文字不死貼左側(cè)，同理span右側(cè)需要增加一個(gè)同樣的填充。
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ì)比以上代碼，可能你已經(jīng)發(fā)現(xiàn)，原來(lái)a頂部的3px給去掉了，把高度改為37px了，行高也改為37px了，為什么這么做，大家動(dòng)手試下就明白了。然后設(shè)置a下span的背景圖片，span默認(rèn)是內(nèi)聯(lián)元素，所以需先轉(zhuǎn)換為塊級(jí)元素；另外需增加鼠標(biāo)經(jīng)過(guò)時(shí)span的樣式。顯示效果如下，對(duì)比一下實(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)注冊(cè)</span></a><a href="#"><span>登錄</span></a><a href="#"><span>在淘寶網(wǎng)上開店</span></a></p> </body> </html> |
提示：可以先修改部分代碼后再運(yùn)行
文章出處：標(biāo)準(zhǔn)之路 編輯：楊雨晨思
相關(guān)文章：
-
西安網(wǎng)站建設(shè)_西安做網(wǎng)站_西安網(wǎng)站制作——西安網(wǎng)絡(luò)公司...
-
CSS實(shí)現(xiàn)圖片裁剪居中 其實(shí)，css實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，只需要設(shè)置img的樣式：object-fit：none即可，不過(guò)你要給img一個(gè)高度，因?yàn)椴眉袈?頁(yè)面：（圖片可以自己隨便截兩張來(lái)測(cè)試） !--長(zhǎng)圖片-- div clas...
-
CSS背景圖片自適應(yīng)全屏 .bg{ background:url(bg.png) no-repeat; background-size:cover; filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )//IE特有的濾鏡 }...
-
Viewport viewport：可視窗口，也就是瀏覽器。 vw Viewport寬度， 1vw 等于viewport寬度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的數(shù)學(xué)運(yùn)算規(guī)則，但是也提供更智能的功能：...
-
從企業(yè)建站角度講，最便捷、最適合企業(yè)的建站系統(tǒng)莫過(guò)于自助建站系統(tǒng)，市場(chǎng)上可供選擇的自助建站平臺(tái)也是一搜一大把。這些自助建站平臺(tái)采用傻瓜式建站風(fēng)格，容易上手，操作簡(jiǎn)單方便...
-
現(xiàn)在想做一個(gè)網(wǎng)站成本很低了，買個(gè)域名，買個(gè)幾十塊空間，弄個(gè)網(wǎng)站建設(shè)程序就可以開始你的玩耍了，如果你還想找成本更低的，可以看下面的分享。 如何創(chuàng)建網(wǎng)站一直都是很多朋友想要知...
-
商城網(wǎng)站建設(shè)如何將吸引力提升 在信息如此豐富多樣的今天，商城網(wǎng)站建設(shè)如何才能夠在眾多的同類當(dāng)中脫穎而出，獲得大眾的吸引和青睞呢？這其實(shí)是相關(guān)網(wǎng)站建設(shè)人員一直在思考的一個(gè)問(wèn)...
-
現(xiàn)在越來(lái)越多的企業(yè)重視網(wǎng)站的運(yùn)營(yíng)推廣，那怎樣推廣效果更好呢？西安蟠龍網(wǎng)絡(luò)小編認(rèn)為沒用永恒不變得，而且要根據(jù)企業(yè)的具體情況選擇合適的推廣方式才是最好的，如果你又運(yùn)營(yíng)推廣的...
-
隨著互聯(lián)網(wǎng)的發(fā)展，人們每時(shí)每刻已經(jīng)離不開網(wǎng)絡(luò)，而網(wǎng)站是網(wǎng)絡(luò)的基本組成部分，可以這么說(shuō)，網(wǎng)絡(luò)是由各種各樣的網(wǎng)站組成的，當(dāng)下，網(wǎng)站是每個(gè)企業(yè)的標(biāo)配，很多個(gè)人都有自己的網(wǎng)站，...
-
網(wǎng)站現(xiàn)在是一個(gè)企業(yè)的標(biāo)配，很多沒有網(wǎng)站的企業(yè)不清楚網(wǎng)站對(duì)企業(yè)有什么作用，那么今天西安蟠龍小編總結(jié)一下網(wǎng)站對(duì)企業(yè)都有哪些好處，希望看完之后您對(duì)網(wǎng)站有更深一層的認(rèn)識(shí)。 一、低...