Membuat menu Vertikal dengan css

hari ini kita akan belajar membat menu vertikal dengan css, lumayan bagus juga sih...!
untuk pertama code CSSnya


]]></b:skin>

   
#menu9 {
    width: 200px;
    margin: 10px;
    }
  
#menu9 li a {
    height: 32px;
      voice-family: "\"}\"";
      voice-family: inherit;
      height: 24px;
    text-decoration: none;
    }  
  
#menu9 li a:link, #menu9 li a:visited {
    color: #FFF;
    display: block;
    background:  url(menu9.gif);
    padding: 8px 0 0 35px;
    }
  
#menu9 li a:hover {
    color: #FFF;
    background:  url(menu9.gif) 0 -32px;
    padding: 8px 0 0 35px;
    }
   

kamu sudah taukan dimana dipasang Code CSSnya kalau belum tahu masuk kke Rancanga-Edit HTML kemudian tekan CTRL + F kamu letakkan diatas code

Sebelum lanjut ke berikutnya edit dulu Css diatas dengan memasang gambar dibawah ini,
jika tidak mau repot cukup COPAS link gambar diatas ini saja 



Lanjut.....!!
 
kemudian langkah selanjutnya pasang code berikut dimana tempat yang cocok yang kamu sukai..!

<h2>Tab Menu 9</h2>
<div id="menu9">
        <ul>
            <li><a href="#1" title="Link 1">Link 1</a></li>
            <li><a href="#2" title="Link 2">Link 2</a></li>
            <li><a href="#3" title="Link 3">Link 3</a></li>
            <li><a href="#4" title="Link 4">Link 4</a></li>
            <li><a href="#5" title="Link 5">Link 5</a></li>   
        </ul>
</div>

Tulisan yang saya warnai isi dengan link dan kata-katamu sendiri
contohnya kayak dibawah ini gan..!!

Contoh Menu vertical

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5

Bagai mana tertarik untuk membuatnya?? ayo tunggu apa lagi langsung buat saja semoga artikel ini bermanfaat...!

Share on Google Plus

About Budi Setiawan

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.