adbrite: Menu vertikal

Wednesday, October 24, 2007

Menu vertikal

Membuat menu vertikal
Untuk Membuat menu vertikal hampir sama seperti membuat menu horisontal
Pertama copy paste kode dibawah ini

#vertical ul {
font: normal 15px verdana, Arial, Sans-serif;
padding-left: 0;
margin-left: 0;
width: 150px;
}
#vertical ul li {
list-style: none;
display:inline;
}
#vertical ul li a {
margin-top: 1px;
width: 140px;
text-decoration: none;
float: left;
text-align: center;
background: #F5DEB3;
color: #000000;
padding: 4px;
border-right: 3px solid #FFEBCD;
border-left: 3px solid #FFEBCD;
border-top: 2px solid #FFFAFA;
border-bottom: 2px solid #FFFAFA;
}
#vertical ul li a:hover {
background: #DEB887;
border: 1px solid #1D71B9;
color: #FFFF00;
}

Letakan kode diatas diantara <head> ...... <head> atau letakan diatas kode ...]]></b:skin>
Kemudian copy kode di bawah ini
<div id='vertical'>
<ul>
<li><a href='http://catoer.blogspot.com'>Home</a></li>
<li><a href='http://catoer.blogspot.com'>product</a></li>
<li><a href='http://catoer.blogspot.com'>busines</a></li>
<li><a href='http://catoer.blogspot.com'>work</a></li>
</ul>
</div>
Letakan kode tersebut dibawah sidebar atau dimana saja yang anda sukai
Contoh:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

letakan diantara
</b:section>
</div>
Untuk alamat link bisa anda edit sendiri.
Untuk warna menu anda dapat mengedit kode diatas
Contoh:
#vertical ul li a:hover {
width: 140px; .......>140px; adalah lebar column disesuaikan dengan lebar
sidebar
background: #DEB887; .......>#DEB887; adalah warna backround
border: 1px solid #1D71B9; .......>#1D71B9; adalah warna garis pinggir
color: #FFFF00; ........>#FFFF00; adalah warna teks
Untuk melihat macam-macam kode warna buka aja Web Color