Membuat Menu Bar Vertikal Keren

Berikut ini Bangiz akan berbagi tentang widget menu bar yang tempilannya vertikal. Untuk kali ini dengan menggunakan kode CSS jadi Anda tidak perlu mengedit HTML. Oke langsung saja jika Anda tertarik untuk membuatnya langsung ikuti saja langkah-langkahnya berikut ini:

Anda hanya perlu menambahkan kode CSS berikut ini:

Jika Anda belum tahu cara menambahkannya kode HTML/Javascript, silahkan baca dulu di sini.

<style>
/*------Vertical navigation menu bar from bangiz.blogspot.com---------*/
#nav-vr01 {
list-style:none;
margin:0;
padding:0;
}
#nav-vr01 li {
margin:0;
padding:0;
}
#nav-vr01 li a:link,#nav-vr01 li a:visited {
display:block;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
width:180px;
text-transform:capitalize;
text-decoration:none;
font-weight:bold;
padding:6px 6px 6px 40px;
color:#111111;
background:#EBEBEE;
border-bottom:1px dotted white;
}
#nav-vr01 li a:hover {
border:1px solid rgba(81,81,84,0.58);
-khtml-border-top-right-radius:5px;
-webkit-border-top-right-radius:5px;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
-moz-box-shadow:0px 0pz 3px 0px #EFEEF4;
-webkit-box-shadow:0px 0pz 3px 0px #EFEEF4;
box-shadow:0px 0px 3px 0px #EFEEF4;
color:#48A2AE;
background:#AFAFB8;
-moz-transition:all .3s cubic-bezier 0.05s;
-webkit-transition:all .3s cubic-bezier 0.05s;
-o-transition:all .3s cubic-bezier 0.05s;
transition:all .3s cubic-bezier 0.05s;
}
#nav-vr01 li a:active {
color:#4848AE;
background:#AEAEB0;
text-decoration:none;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear;
}
</style>
<ul id="nav-vr01">
<li><a href="#" title="#title1">Home</a></li>
<li><a href="#" title="#title2">Facebook</a></li>
<li><a href="#" title="#title3">Twitter</a></li>
<li><a href="#" title="#title4">Google+</a></li>
<li><a href="#" title="#title5">About</a></li>
<li><a href="#" title="#title6">Contact</a></li>
<li><a href="#" title="#title7">FAQ</a></li>
</ul>

Keterangan:
> Ganti tanda # dengan alamat URL Anda 
> Ganti judul yang berwarna biru dengan yang Anda inginkan 
> Untuk mendapat warna yang cocok silahkan lihat kode warna CSS atau HTML
> width:180px; untuk mengatur lebar supaya sesuai dengan template yang Anda miliki.