Home » » Membuat Menu Horizontal Cantik Nan Sederhana

Membuat Menu Horizontal Cantik Nan Sederhana

Menu Horizontal CSS
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;
}

Sumber:
http://css.maxdesign.com.au/
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Rohis Facebook

+ Create Comment + 4 Responses so far.

20 Desember 2013 23.58

keren mas,, kayak folder gitu tu menunya hehe :)

21 Desember 2013 06.04

@Agri Ahyar Prasetyahasailx lucu, unyu2 hehe...

7 Februari 2014 00.17

izin nyoba dulu yah mas rohis....

-saLam bLogger-

21 April 2014 21.13

langsung dicoba nih menu horisontal-nya untuk blog blognya bobotoh persib bandung

Poskan Komentar

Terima Kasih banyak atas saran dan kritiknya.

Sama seperti peraturan yang dibuat oleh para blogger pada umumnya.., cuma disini saya harapkan agar para pengunjung untuk lebih fokus pada artikel kami yang bertemakan Agama (Islam), khususnya untuk saudara-saudari kami yang Muslim dan Muslimah.

0. Yang OOT silahkan masuk ke menu Buku Tamu/Blogwalking!
1. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
2. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
3. Harus Sopan
4. Admin tidak meladeni Debat kusir
5. Bercanda gk boleh ada unsur pornonya dan unsur Bohongnya
6. Silahkan melampirkan link Mati, gk boleh link hidup