Home » » Membuat Menu Vertical Cantik Nan Sederhana

Membuat Menu Vertical Cantik Nan Sederhana

Menu Vertical CSS
ilustrasi

Masih soal penata rias di postingan yang ini Membuat Menu Horizontal Nan Cantik Dan Sederhana, kalau bingung maksud saya silahkan baca link diatas. *smile

Postingan ini masih nyangkut dengan postingan sebelah, jadi tidak perlu lagi admin bertele-tele, bahasa kerennya tudepoinajadeh, awas bahasa asing!.

Tanpa berpanjang-panjang lagi, makin panjang makin ngawur soalnya, berikut HTML dan CSSnya Menu Vertical.
 
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 ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#navcontainer li { margin: 0 0 3px 0; }
#navcontainer a
{
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid #333;
width: 160px;
background-color: #999;
background-image: url(images/l1_down.gif);
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
border: 1px solid #333;
background-color: #F60;
background-image: url(http://css.maxdesign.com.au/listamatic/images/l1_down.gif);
color: #333;
}
#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(http://css.maxdesign.com.au/listamatic/images/l1_over.gif);
color: #333;
}
 


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 + 3 Responses so far.

19 Desember 2013 13.08

wah ternyata mudah sekali ya mas bikin menu vertikal. Sepertinya bisa dicoba nich tutorialnya. Thanks mas rohis ^^

21 Desember 2013 06.00

@Wahyu Eka Prasetiyariniiya mbk Rin gk ribet kan, hasilx pun lumayan keren! *smile

21 Desember 2013 23.07

desainnya cakep

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