Membuat Menu Horizontal Cantik Nan Sederhana

ini bukan panampakan demo!

Menu Horizontal ini kombinasi antara CSS dan Gambar, jadi cantik atau tidaknya tergantung penata riasnya hehehe.., maksudnya tergantung bagus atau tidaknya suatu desain gambar.

Tanpa membutuhkan CSS yang panjang, cukup dengan mengandalkan efek hover dengan penggabungan gambar menu ini terlihat cantik/keren terpancar aura postifnya *makin ngawur deh hehe.., Jadi menu ini tidak memberatkan blog, terserah anda mau masukkan script dalam edit HTML atau bisa juga pada Widget HTML.

Tanpa berpanjang-panjang lagi, berikut HTML dan CSSnya.

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navcontainer
{
margin: 0px;
padding: 0px;
}
#navcontainer ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
}
#navcontainer ul li { float: left; }
#navcontainer ul li a
{
text-decoration: none;
background:url(http://butterlabel.com/transfer/butterlist/images/folderOFF.png) no-repeat top left;
font-size: 10px/12px;
float: left;
margin: 0px;
height: 67px;
width: 75px;
padding-top: 13px;
padding-right: 15px;
padding-bottom: 0px;
padding-left: 10px;
}
#navcontainer li a:hover
{
background:url(http://butterlabel.com/transfer/butterlist/images/folderON.png) no-repeat left top;
color: #000000;
}

Demo

Sumber:

http://css.maxdesign.com.au/