Tutorial CSS: Membuat Navigasi Vertikal

Navigasi horizontal sudah, kali ini saya akan memberikan contoh membuat navigasi vertikal, yang bisa dipasang di sidebar anda. Konsep dasarnya adalah list html. Seperti kalau di ms word kita tahu numbered list, yang bisa memakai angka atau huruf, bisa juga juga memakai bullet. (Bullet and Numbering).

langsung saja. Buatlah elemen div dengan kelas sidebar
.sidebar
{
padding:0;
width:100px;
text-align:right;
}
ini akan menjadi tempat kita meletakkan elemen list, yang kalau di ms word kita sebut bullet and numbering. div sidebar di atas kita setting dengan padding:0 artinya, jarak alemen atau font yang berada di dalam div tersebut 0, (mepet pinggir).

Kemudian widt:100px; lebar elemenkita set 100 pixel, ini bisa kita ubah sesuai dengan lebar sidebar kita. atau tak usah diberi property ini kalau berada dalam elemen lain yang sudah ditentukan width-nya. Misalnya berada salam kolom table atau #div dengan fixed width, lebar yang ditentukan.

text-align:right, text rata kanan.

mulai dengan list:
.sidebar ul
{
margin:0;
padding:0;
}
ul = unordered list;
kita tulis .sidebar ul karena nanti kita akan memasang elemen ul dalam div dengan class sideba.

.sidebar li
{
font-family:georgia,tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
list-style-type:none;
border-bottom:1px solid #ffffff;
}

fornt-family: kelompok huruf, list-style-type: none, tidak memakai penanda list, dalam ms word bisa memakai angka, huruf, atau bullet.
border-bottom:besarnya 1 pixel, silid, dengan warna putih.

.sidebar li a
{
color:#000000;
display:block;
text-decoration:none;
background-color:#00CCCC;
padding:2px 5px 2px 1px;
border-right:4px solid;
border-right-color:#006666;
}
Tampilannya akan seperti ini:


karena list nanti berupa link, yang bisa kita isi dengan url atau ke halaman yang lain, maka kita perlu menambahkan elemen a (link).

.sidebar li a:visited
{
color:#003366;
}
link yang sudah di klik, halaman sudah terbuka, akan berganti warna textnya, #003366.

.sidebar li a:hover
{
color:#ffffff;
text-decoration:none;
background-color:#006699;
border-right:4px solid;
border-right-color:#003366;
}
mengatur penampilan pada saat mouse kita melewati tulisan dalam list tersebut: hover;

jangan lupa taruh property di atas pada bagian style di dalam head.

bagi yang berminat, silakan download, free.