帶下拉子功能表的導覽功能表

標籤：http   color   使用   os   io   ar   問題   div   

一、帶下拉子功能表的導覽功能表

下拉式功能表在一些企業網站應用程式尤為廣泛，它存在使用方便，佔用空間小等特點。之前縱嚮導航教程中已使用過二級導航，今天製作下橫嚮導航菜單的二級菜單，方法和縱向一樣，只不過由縱向改變為橫向而已，下面我們以上一章第二節用圖片美化的橫嚮導航中的執行個體進行修改。

先在html代碼增加二級菜單的代碼：

<div id=”menu”>
<ul>
<li><a id=”current” href=”#”>首頁</a></li>
<li><a href=”#”>網頁版式</a>
<ul>
<li><a href=”#”>自適應寬度</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執行個體</a></li>
<li><a href=”#”>常用代碼</a></li>
</ul>
</div>

增加完代碼後，在瀏覽器裡預覽一下：

是不是一看頭都大了，怎麼變成這樣了。別懵，我們分析一下錯亂的原因。首先我們看下“自適應寬度”和“固定寬度”兩個二級菜單也繼承了一級菜單的背景和橫向排列，所以我們先把二級菜單的背景和浮動清除掉，增加以下css代碼：

#menu ul li ul li { float:none;}
#menu ul li ul li a { background:none;}

現在預覽看下，二級菜單是不是已經歸位了，但滑鼠划過時還繼承了一級菜單的樣式，所以也改為最終效果上的黑色背景白色文字，還有下拉式功能表的灰色邊框和灰色背景也一併加上，修改並增加如下代碼：

#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;}

第一行設定二級菜單的灰色邊框；為了美觀，我們把下拉式功能表的寬度設定成和一級菜單寬度相同，第二行的width:85px再加上第一行上設定的邊框左右各1px後正好是87px，和一級菜單寬度相同。margin:0是為了清除掉繼承一級菜單中margin-left:2px；最後一行設定滑鼠划過時的樣式。

再預覽一下，是不是基本的樣式已實現了。

下一步就該把二級菜單隱藏，當滑鼠划過時顯示出來了。增加如下代碼：

#menu ul li ul { display:none; border:1px solid #ccc;}
#menu ul li:hover ul { display:block;}

注意第二行的寫法，#menu ul li:hover ul這個樣比較難理解，它的意思是定義當滑鼠划過#menu下ul下li時，li下的ul的樣式（有點饒舌），這裡設定為display:block，意思是滑鼠划過時顯示這塊內容。開始隱藏，滑鼠划過時顯示， 這就實現了我們想要的效果。目前IE6隻支援a的偽類，其它標籤的偽類不支援，所以要想在IE6下也顯示正確，需要藉助js來實現。我們定義一個類.sfhover（自己命名，需和JS中相同）的屬性為display:block;然後當滑鼠划過後，用JS給當前li添加上這個樣式上，根據css的優先順序：指定的高於繼承的原則，就實現了IE6下的正確顯示。所以增加如下代碼：

#menu ul li.sfhover ul { display:block;}

認真跟著教程製作的朋友可能已經發現，現在應用的JS和縱嚮導航時應用的不樣，但最終實現的效果是一樣的。同理css在布局網站時，也是可以多種方法的，正所謂條條大道通羅馬，希望大家舉一反三，加深前面教程的掌握。JS部分本例不做講解，如果你想弄清楚JS是如何?的，請學習js相關內容。到這裡，本例就基本完成了，還有一個問題是當前置航下有內容的話，如果二級菜單顯示，將會把下邊的內容擠跑，所以需要給#menu ul li ul增加position:absolute;屬性，當其絕對位置後，它將脫離原來文檔流，不再佔據空間，因此也不會再把下邊內容擠跑了。

二、絕對位置和浮動的區別和運用

學習到現在，定位和浮動也都涉及到了，但有些朋友可能還在迷惑，兩者都可以分欄布局，到底什麼時候用浮動，什麼時候用定位呢？

當一個元素使用絕對位置後，它的位置將依據瀏覽器左上方開始計算或相對於父容器（在父容器使用相對定位時）。 絕對位置使元素脫離文檔流，因此不佔據空間。普通文檔流中元素的布局就當絕對位置的元素不存在時一樣。因為絕對位置的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素。

而浮動元素的定位還是基於正常的文檔流，然後從文檔流中抽出並儘可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出後，仍然在文檔流中的其他元素將忽略該元素並填補他原先的空間。它只是改變了文檔流的顯示，而沒有脫離文檔流，理解了這一點，就很容易弄明白什麼時候用定位，什麼時候用浮動了。

一個元素浮動或絕對位置後，它將自動轉換為區塊層級元素，而不論該元素本身是什麼類型。

三、 css自適應寬度滑動門菜單

CSS自適應寬度菜單指菜單的寬度可以隨著內容的增加而變寬，就拿上邊的執行個體來說，是按4個字的寬度來設計的，如果其中一項為5個字或更多，就放不下了。那麼我們就需要讓它的寬度可以隨著內容的增減而變化，這就是css自適應寬度菜單。

你是否還記得在第五章時學習的css按鈕執行個體（如），當時只做了一個按鈕，它這裡是三個按鈕，而且寬度不一樣，今天我們還以這個按鈕為基礎，製作寬度自應適應的按鈕。

那麼它的實現原來是什嗎？我們看下邊一張圖。要想實現自適應寬度，需要在文字上增加一個輔助標籤，如span，分別在a上和span上設定背景，一個左側對齊，一個右側對齊，如下的原理圖，

四條輔助線內為一個按鈕元素，綠色部分為span，然後定義它的背景圖片靠右側對齊，而左側的部分為a的背景圖片，定義靠左側對齊。當文字多時，會把span撐開，這實現了自適應寬度的按鈕了。這裡需要一張如下的圖片，它的寬度要寬於你所應用的最寬寬度，這樣才能顯示正常，同時根據以前學習的css Sprites技術，把背景圖片和滑鼠經過圖片放到一張圖片上。

拿第五章css按鈕的例子代碼進行修改，先改為背景圖片使用，再增加兩個字數不等按鈕，並在文字上增加span標籤

 

預覽顯示效果如下所示，因背景圖片比較長，所以右側顯示不太友好，下一步就需要把a的寬度給去掉，設定span的背景，使右側顯示正常，另外把三個按鈕橫向排列

在a上增加如下代碼：

float:left; margin:5px;

橫向排列，並增加5px的外邊距，現在看下效果吧。為了美觀，下一步需要a的左側增加填充，使文字不死貼左側，同理span右側需要增加一個同樣的填充。

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;}

對比以上代碼，可能你已經發現，原來a頂部的3px給去掉了，把高度改為37px了，行高也改為37px了，為什麼這麼做，大家動手試下就明白了。然後設定a下span的背景圖片，span預設是內嵌元素，所以需先轉換為區塊層級元素；另外需增加滑鼠經過時span的樣式。顯示效果如下，對比一下執行個體圖，是不是實現了這樣的效果。