Thursday, August 23, 2007

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:
gambar list

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.

6 comments:

aji said...

Waduh tenkyou berat mas.Tapi gini mas,saya lagi belajar css,jadi masih rada-rada bingung nih.Saya punya template css yang saya dapet di internet,css nya itu yang terpisah dengan htmlnya,jadi bikin di htmlnya gimana.Kayak ada tulisan kayak gini :
.post ul.controls li a.printerfriendly
{
background-image: url('images/icon-printerfriendly.gif');
}
nah nanti penjabarannya di html gimana?

meds said...

untuk mas aji, semoga ini membantu:

itu terdiri dari tiga tingkat. div umum= post(merupakan bagian dari post). kemudian merupakan unordered list ul dengan class control. li itu list, a itu link dengan kelas printerfriendly

[div class="post"]
[ul class="controls"]
[li][a class="printerfriendly" href="url"]Nama List[/a][/li]
[/ul]
[/div]

tanda [ silakan di ganti dengan "<".

hasilnya gambar icon printer friendly dengan link script untuk format printer friendly.

arrohwany said...

Asyik dapet ilmu lagi
Ilmunya memnag banyak banget nih :)

Hengky said...

nice tutorial sob..

resep kue kacang bawang said...

makasih sob, keren tutorialnya

Horier said...

cuma saran aja nih sob, mendingan klo buat tutorial kaya gini diberikan nomer biar lebih manteb jadinya, hehehehe

salam kenal yah,