如何用CSS製作橫向菜單

來源:互聯網
上載者:User
css|菜單

儘管在我的網站和文章裡都有提到CSS製作菜單的方法,但很多初學者還是不太清楚如何?,以及實現原理,我想專門寫一篇詳細教程會對大家比較有協助。

我們先來看一個菜單的例子,最終效果是:

  • 首頁
  • 產品介紹
  • 服務介紹
  • 支援人員
  • 立刻購買
  • 聯絡我們

然後我們來詳細講解步驟

第一步:建立一個無序列表

我們先建立一個無序列表,來建立菜單的結構。代碼是:

<ul>
<li><a href="1">首頁</a></li>
<li><a href="2">產品介紹</a></li>
<li><a href="3">服務介紹</a></li>
<li><a href="4">支援人員</a></li>
<li><a href="5">立刻購買</a></li>
<li><a href="6">聯絡我們</a></li>
</ul>

效果是:

  • 首頁
  • 產品介紹
  • 服務介紹
  • 支援人員
  • 立刻購買
  • 聯絡我們

第二步:隱藏li的預設樣式

因為看起來不是很好看,菜單通常都不需要li預設的圓點,我們給UL定義一個樣式來消除這些圓點。

當然,為了更好的控制整個菜單,我們把菜單放在一個div裡。頁面代碼變成:

<div class="test"> <ul>
<li><a href="1">首頁</a></li>
<li><a href="2">產品介紹</a></li>
<li><a href="3">服務介紹</a></li>
<li><a href="4">支援人員</a></li>
<li><a href="5">立刻購買</a></li>
<li><a href="6">聯絡我們</a></li>
</ul> </div>

CSS定義為:

.test ul{list-style:none;}

說明:“.test ul”表示我要定義的樣式將作用在test的層裡的ul標籤上。

現在的效果是沒有圓點了:

  • 首頁
  • 產品介紹
  • 服務介紹
  • 支援人員
  • 立刻購買
  • 聯絡我們

第三步:關鍵的浮動

這裡是菜單變成橫向的關鍵,我們給li元素加上一個“float:left;”屬性,讓每個li浮動在前面一個li的左面。

CSS定義為:

.test li{float:left;}

效果是:

  • 首頁
  • 產品介紹
  • 服務介紹
  • 支援人員
  • 立刻購買
  • 聯絡我們

看,菜單變橫向了。就這麼簡單!下面需要做的就是最佳化細節了。

第四步:調整寬度

菜單都擠在一起不好看怎麼辦?我們來調節li的寬度。

在CSS中添加定義width:100px指定一個li的寬度是100px,當然你可以根據你的需要調整數值:

.test li{float:left;width:100px;}

效果是:

  • 首頁
  • 產品介紹
  • 服務介紹
  • 支援人員
  • 立刻購買
  • 聯絡我們

如果我們同時定義外面div的寬度,li就會根據div的寬度自動換行,例如定義了div寬350px,6個li的總寬度是600px,一行排不下就自動變成兩行:

.test{width:350px;}

效果是:

  • 首頁
  • 產品介紹
  • 服務介紹
  • 支援人員
  • 立刻購買
  • 聯絡我們

第五步:設定基本連結效果

接下來,我們通過CSS來設定連結的樣式,分別定義:link、:visited、:hover的狀態

.test a:link{color:#666;background:#CCC;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:underline;background:#F00;}

效果是:

  • 首頁
  • 產品介紹
  • 服務介紹
  • 支援人員
  • 立刻購買
  • 聯絡我們

第六步:將連結以區塊層級元素顯示

有朋友問,菜單連結的背景色為什麼沒有填滿整個li的寬度?恩,解決的方法很簡單,在a的樣式定義中增加display:block,使連結以區塊層級元素顯示。

同時我們微調了如下細節:

  • 用text-align:center將菜單文字置中;
  • 用height:30px增加背景的高度;
  • 用margin-left:3px使每個菜單之間空3px距離;
  • 用line-height:30px;定義行高,使連結文字縱向置中;

CSS定義象這樣:

.test a{display:block;text-align:center;height:30px;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}

效果變成:

  • 首頁
  • 產品介紹
  • 服務介紹
  • 支援人員
  • 立刻購買
  • 聯絡我們

這樣就漂亮多了吧。

第七步:定義背景圖片

我們通常都會在每個連結前加一個小表徵圖,這樣導航更清楚。CSS是採用定義li的背景圖片來實現的:

.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}

說明:“background:url(arrow_off.gif) #CCC no-repeat 5px 12px;”這句代碼是一個CSS縮寫,表示背景圖片是arrow_off.gif;背景顏色是#CCC;背景圖片不重複"no-repeat",背景圖片的位置是左邊距5px、上邊距12px;

預設狀態下,表徵圖為arrow.off.gif,當滑鼠移動到連結上,表徵圖變為arrow_on.gif

效果變成:

  • 首頁
  • 產品介紹
  • 服務介紹
  • 支援人員
  • 立刻購買
  • 聯絡我們

現在css的完整代碼是:

.test ul{list-style:none;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}

頁面的完整代碼是:

<div class="test">
<ul>
<li><a href="1">首頁</a></li>
<li><a href="2">產品介紹</a></li>
<li><a href="3">服務介紹</a></li>
<li><a href="4">支援人員</a></li>
<li><a href="5">立刻購買</a></li>
<li><a href="6">聯絡我們</a></li>
</ul>
</div>

好了,主要步驟就是這7步,立刻拷貝和修改代碼試試,你也可以用CSS做橫向菜單了!



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.