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

上一篇提到的陽春navigation,如果在視覺要求高的情況下是不夠用的,很多時候整個選單需要用瀏覽器不支援的字型顯示,這時候一方面要顧及選單的語意,又要做出好看的選單,有必要將陽春navigation升級一下。

準備一張新的圖片,跟之前不同的是,現在整個navigation的外觀都要藏到背景來。

CSS的好處就在這裡,html結構無需大改,只要加上一些class。現在每個選項要有自己的class(item1~item4),這樣才能為它們指定不同的背景圖。

【HTML】

<ul class="menu">
<li class="item1″><a href="#">About</a></li>
<li class="item2″><a href="#">Product</a></li>
<li class="item3″><a href="#">Service</a></li>
<li class="item4″><a href="#">Contact</a></li>
</ul>

要注意的是,因為要使所有項目有固定的長寬(100×30),所以要將list的<a>轉成block。長寬的設定對inline element不是頂有效,<a>在預設情況下就是一個inline element。

要將已變成block的<a>排成橫向,使用float:left。

【CSS】

.menu li{
list-style-type:none;
}
.menu li a{
display:block;
width:100px;
height:30px;
float:left;
background:url(“menubg2.gif") left top no-repeat;
}

重頭戲來了,選單的框架已經出來,要把上面的文字藏起來,只顯示圖片。

【CSS】

.menu li a{
display:block;
width:100px;
height:30px;
float:left;
background:url(“menubg2.gif") left top no-repeat;
text-indent:-9999px;
}

用text-indent就可以完美的把list文字移出視窗之外,但仍保留在html原始碼之中。而且連結感應區仍留在原地不受影響。接下來要顯示選項各自正確的圖,只要用上一篇提到的背景圖定位方法,來設定各選項的圖片及rollOver動作了。

完整的CSS如下。

<style type="text/css">
<!–
.menu{
margin:0;
padding:0;
}
.menu li{
list-style-type:none;
}
.menu li a{
display:block;
width:100px;
height:30px;
float:left;
background:url(“menubg2.gif") left top no-repeat;
text-indent:-9999px;
}
.menu li.item2 a{
background:url(“menubg2.gif") -100px top no-repeat;
}
.menu li.item3 a{
background:url(“menubg2.gif") -200px top no-repeat;
}
.menu li.item4 a{
background:url(“menubg2.gif") -300px top no-repeat;
}
.menu li.item1 a:hover{
background:url(“menubg2.gif") left -30px no-repeat;
}
.menu li.item2 a:hover{
background:url(“menubg2.gif") -100px -30px no-repeat;
}
.menu li.item3 a:hover{
background:url(“menubg2.gif") -200px -30px no-repeat;
}
.menu li.item4 a:hover{
background:url(“menubg2.gif") -300px -30px no-repeat;
}
–>
</style>

廣告

發表迴響

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

WordPress.com Logo

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

Twitter picture

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

Facebook照片

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

Google+ photo

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

連結到 %s