CSS專題:用一張背景圖做navigation(一)

不要再用table做選單了!這樣我們都會變成爆肝木乃伊…

table時代做選單,都是把每個項目切成一個個小塊,再填進table cell裡。如果還有rollOver動作,每個項目就要載入兩個小塊,有四個選項,就要載入八個小塊…這樣的壞處至少有三點:

  1. 增加了過多的HTTP request。
  2. 在html code裡一開始只看到一堆圖片連結,不管在語意或SEO上都是大不利因素。
  3. 每次改選單項目,又要將圖片重新切成n小塊。

先來做個陽春版的css navigation。選單項目以list來建構,並直接將list下的項目當做顯示文字。

【HTML】

<ul class="menu">
<li><a href="#">About</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>

這樣顯示的list是會換行的,為了把它變成橫向的選單形式,CSS中要把display轉成inline,同時把預設的bullet和margin、padding等等都去掉,好控制字出現的位置:

【CSS】

.menu ul{
list-style:none;
}
.menu li{
display:inline;
margin:0;
padding:0;
}

事實上list僅能在排列位置上產生作用,真正的重頭戲在每個list項目加上連結後,控制<a>才能達成感應區和rollOver的動作。這時候要準備一張背景圖,將rollOver前後的情形都排好在裡面,到時只要載入這張圖,就可以變成所有項目共同資源。

然後把它當作<a>的背景圖,left top表示將顯示背景的原點定在(0,0)的地方,no-repeat表示背景不並排。padding的作用在這裡是將<a>周圍的空間撐大以便感應,只要不超過圖片的大小,圖片邊緣就不會露出。

【CSS】

.menu li a{
background:url(“menubg1.gif") left top no-repeat;
margin:0;
padding:5px 15px;
}

指定滑鼠移過時產生的動作:將顯示背景的原點設定為往下30px之處,這樣rollOver動作時背景就會改變。

.menu li a:hover{
background:url(“menubg1.gif") left -30px no-repeat;
}

最後再做一些顏色和位置的修飾,就大功告成了。

這個選單的好處是直接用文字顯示,且只用一套背景,容量非常小,html的語意也有顧及。缺點是每個選項會隨著文字長短不同而變化,無法統一。下一篇再來記載更好的做法。

完整的CSS如下。

<style type="text/css">
<!–
.menu ul{
list-style:none;
}
.menu li{
font-size:12px;
font-family:Arial;
display:inline;
margin:0;
padding:0;
}
.menu li a{
color:#aaa;
text-decoration:none;
background:url(“menubg1.gif") left top no-repeat;
margin:0;
padding:5px 15px;
}
.menu li a:hover{
background:url(“menubg1.gif") left -30px no-repeat;
}
.menu li a:link,
.menu li a:hover,
.menu li a:visited,
.menu li a:active,
{
text-decoration:none;
}
–>
</style>

廣告

2 thoughts on “CSS專題:用一張背景圖做navigation(一)

  1. 最近去找了一些 CSS Menu Generator來試試,感覺還不賴! 試試看 google “css MenuGenerator" , “cssTab Generator"。 (偷懶是我的本色啊!)

  2. 感謝Richard大哥,我要學的還多著!現在發現"分享"是件很厲害的事,不管是大學問或是小消息,都能以光速傳遞啊~

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s