 |
| Menu bar vertikal |
Anda hanya perlu menambahkan kode 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.
