Pada awalnya ada pertanyaan bagaimana membuat menu dropdown yang ringkas dan tanpa kode Javascript yang njlimet. Pertanyaannya sebenarnya sudah dijawab tapi saya ingin membahas lebih rinci tentang hal ini agar mungkin saja dapat menambah wawasan dan pengetahuan tentang penggunaan CSS. Nantinya saya akan mencoba memberikan penjelasan yang lengkap tentang arti dari kode CSS yang digunakan.
1. Kode HTML
Kita mulai dengan membuat sebuah dokumen HTML sederhana yang hanya berisi menu yang akan kita buat. Tentu saja kamu bisa menambah isinya agar menjadi halaman web yang lebih lengkap tapi sekarang kita fokuskan hanya pada bagian menu dropdown yang akan kita buat saja. Berikut ini kode HTML-nya:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="id">
<head>
<title>Menu Drop-Down</title>
<style type="text/css" media="screen, projection">
/* CSS-nya ditulis di disini ! */
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Tim</a></li>
<li><a href="#">Kantor</a></li>
</ul>
</li>
<li><a href="#">Layanan</a>
<ul>
<li><a href="#">Desain Web</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
</ul>
</body>
</html>
Catatan: untuk mempersingkat penulisan, kode berikutnya harus kamu letakkan di dalam blok style di bagian head (yang ada tulisan "CSS-nya ditulis disini !").
2. Mulai membentuk menu dropdown
Kamu perhatikan bahwa saya menggunakan unordered list (ul) untuk membuat menu karena dengan penggunaan tag ul maka susunan menu akan nampak lebih jelas. Untuk membuat submenu maka saya membuat ul dalam ul yang bisa saja kamu kembangkan dan tambah lagi kedalaman menunya. Perhatikan bahwa tag ul terluar saya beri nama id "menu" sehingga untuk CSS selector bisa menggunakan: ul#menu atau cukup dengan #menu saja.
Sebelumnya saya akan memberitahukan bahwa menu utama nanti akan saya buat berjajar kesamping secara horizontal, untuk membuat menu utama bertumpuk kebawah kamu cukup membuang properti "float: left" pada li. Untuk bentuk list saya buat secara umum saja hiasannya karena nanti terserah kamu ingin diberi hiasan gambar atau apapun sesuai keinginannmu. Kita mulai memberi style pada tag ul utamanya. (*sekali lagi kode berikut letakkan di bagian style!)
#menu {
margin: 0;
padding: 0;
list-style: none;
min-width: 450px;
}
Dimulai pada bagian ul utama: Pemberian margin dan padding dengan nilai 0 akan membuat "efek" list akan hilang karena pada umumnya list item akan menjorok masuk kedalam. Kemudian list-style diberi nilai "none" agar list yang muncul tidak memiliki style apapun (beberapa list-style yang mungkin kamu kenal antara lain circle, square, dan disc). Pemberian nilai min-width: 450px; dikarenakan saya memiliki tiga menu utama yaitu Beranda, Tentang dan Layanan yang masing-masing memiliki lebar 150px (150 pixel). Jika kamu memiliki menu yang lebih banyak kamu bisa menambahkan angka ini. Penggunaan properti min-width akan berguna bila kita ingin suatu elemen memiliki lebar minimal dimana jika isinya lebih panjang maka dia akan memanjang dengan sendirinya. Jika kamu menggunakan properti "width" dan bukan "min-width" maka elemen itu akan tetap segitu biarpun isinya lebih panjang.
#menu li {
position: relative;
width: 150px;
height: 25px;
float: left;
}
Kita lanjutkan ke tag li (list item) yang berlaku pada semua tag li dibawah ul utama. Penggunaan properti "position: relative" agar kita bisa menempatkan elemen ul dibawahnya secara tepat / absolute (kamu akan lihat nanti di kode berikutnya). Saya tentukan lebar dan tinggi dari menu kita adalah 150 pixel dan 25 pixel. Kemudian pemberian properti "float: left" akan membuat tiap list item akan memaksa berjejer ke kiri dan tidak turun kebawah (defaultnya li akan turun kebawah). Ada dua kelompok elemen di HTML yaitu elemen "inline" (elemen ini akan berusaha mengisi ruang disebelahnya dan akan turun kebawah bila tidak ada ruang lagi, contohnya: a, img, span, em) dan elemen "block" (elemen ini akan selalu turun kebawah elemen sebelumnya seperti kalau ditekan tombol "Enter", contohnya: p, div, ul). Perilaku default tiap elemen bisa diubah dengan menggunakan properti "display", misalkan tag a yang inline bisa diubah menjadi block dengan memberi properti "display: block;".
#menu li a {
display: block;
width: 150px;
height: 25px;
border: 1px solid #ccc;
background-color: whitesmoke;
}
Kita akan memberi efek pada tag a yang ada di dalam tag li. Seperti yang saya bilang sebelumnya kita akan mengubah perilaku tag a yang inline menjadi block agar tag a dapat mengisi semua ruang kosong di li. Kemudian kita buat lebar dan tinggi tag a sama dengan tag li containernya dan kita beri border berupa garis tipis 1 pixel dengan warna #ccc menggunakan perintah "border: 1px solid #ccc". Dan baris terakhir pada kode diatas kita memberi warna background whitesmoke pada tag a.
#menu li ul {
margin: 0;
padding: 0;
position: absolute;
top: 26px;
list-style: none;
display: none;
}
Selanjutnya kita memberi style pada elemen ul dalam ul utama, yang hampir sama dengan ul utama dalam hal margin dan padding serta list-style (diset 0 dan list-stylenya none). Perhatikan bahwa saya memberi properti "position: absolute;" sehingga saya dapat meletakkan elemen ini dengan tepat per pixelnya menggunakan perintah "left" dan "top" (kamu juga bisa menggunakan perintah "right" dan "bottom"). Nilai top saya beri angka 26 pixel agar elemen ul tidak menutupi link sebelumnya karena tiap tag a memiliki tinggi 25 pixel (tambah 1 pixel lagi menjadi 26).
Kalau kamu lihat di browser sekarang mungkin kamu akan menyadari bahwa kita tidak melihat submenu lagi disitu dan cuma ada tiga menu utama saja yang nampak. Hal ini dikarenakan kita menggunakan properti "display: none;" sehingga elemen ul tersebut hilang (beda dengan tidak kelihatan). Untuk menyembunyikan elemen kita bisa menggunakan dua macam cara yaitu "display: none" dan "visibility: hidden" dan untuk memunculkan lagi (jangan2 kamu cuma bisa menyembunyikan tapi tidak bisa memunculkannya lagi :D) dengan "display: block" dan "visibility: visible". Lalu apa perbedaan keduanya? Jika kamu menggunakan "display: none" maka elemen tersebut benar-benar hilang dan tidak mengambil ruang apapun di layar sedangkan "visibility: hidden" elemen tersebut cuma tidak kelihatan tapi tetap mengambil ruang disekitarnya. Tahu kan maksud saya?
#menu li:hover ul {
display: block;
}
Ini dia "keajaiban" dari CSS nya yaitu penggunaan pseudo-class :hover pada elemen li. Sebenarnya ada beberapa pseudo-class lain seperti :link, :visited, :active (ketiganya biasanya untuk tag a). Beberapa browser jadul tidak mendukung penggunakan pseudo-class :hover pada elemen selain a tapi saya tidak akan membahasnya karena sebagian besar browser sekarang sudah dapat menjalankan kode ini dengan benar. Technically, menu kita sudah jadi :), coba lintaskan mouse ke menu maka submenunya akan tampil.
3. Sentuhan terakhir
Kamu tambahkan baris berikut ke dalam bagian #menu li a:
text-decoration: none;
text-indent: 7px;
color: #4B4B4B;
Kode diatas akan membuat teks link tidak memiliki "hiasan" garis bawah, membuat teks agak menjorok kedalam sebanyak 7 pixel (biar tidak terlalu mepet ke kiri) dan terakhir kita memberi warna pada teks link yang kita buat. Selanjutnya kita ingin memberi efek mouse melintas pada tag a dengan mengubah warna background yang dimilikinya. Ini kodenya dan kamu bisa letakkan dimana saja.
#menu li a:hover {
background-color: #C7C7C7;
}
#menu li ul li a:hover {
background-color: #727272;
color: #FFF;
}
Ehm, saya kira menunya sudah lumayan jelek :), dan gak enak dilihat.. jadi untuk hiasan atau pengembangan selanjutnya terserah kamu. Mungkin nanti kamu akan menambah banyak properti atau dengan mengubah kode HTML-nya (misalkan dengan menambah nama class tertentu), itu semua terserah kamu dan tidak ada seorang pun yang melarang. Dan jika gagal tidak ada seorangpun yang akan menolong :D. Kode lengkap dari apa yang kita lakukan dari awal sampai akhir adalah seperti ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="id">
<head>
<title>Menu Drop-Down</title>
<style type="text/css" media="screen, projection">
#menu {
margin: 0;
padding: 0;
list-style: none;
min-width: 450px;
}
#menu li {
position: relative;
width: 150px;
height: 25px;
float: left;
}
#menu li a {
display: block;
width: 150px;
height: 25px;
border: 1px solid #ccc;
background-color: whitesmoke;
text-decoration: none;
text-indent: 7px;
color: #4B4B4B;
}
#menu li a:hover {
background-color: #C7C7C7;
}
#menu li ul li a:hover {
background-color: #727272;
color: #FFF;
}
#menu li ul {
margin: 0;
padding: 0;
position: absolute;
top: 26px;
list-style: none;
display: none;
}
#menu li:hover ul {
display: block;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Tim</a></li>
<li><a href="#">Kantor</a></li>
</ul>
</li>
<li><a href="#">Layanan</a>
<ul>
<li><a href="#">Desain Web</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
</ul>
</body>
</html>
4. Kesimpulan
Menjadi web master tidaklah harus dengan menguasai kode Javascript atau kode PHP dengan baik tapi sebenarnya jika mau berusaha maka cukup dengan HTML dan CSS kamu sudah bisa menunjukkan ke-master-anmu dalam bidang web. Jujur tidak lah mudah untuk menguasai CSS karena dibutuhkan banyak sekali pengetahuan dasar yang harus dipelajari dan dilatih. CSS bukanlah bahasa mudah yang bisa dikesampingkan karena justru CSS akan menjadi "muka" dari apa yang kita kerjakan. Serumit dan sebagus apapun kode PHP dan Javascript yang kita buat tapi jika kode CSS-nya hancur dan berakibat halaman web kita juga hancur maka semua akan menjadi percuma dan sia-sia. User awam tidak peduli Javascript, tidak peduli PHP, yang mereka tahu bahwa tampilan web kita bagus, itu saja.
Selamat berlatih dan belajar, karena berlatih dan belajar akan kita lakukan bersama-sama dan akan terus kita lakukan sampai akhir hayat kita. Sampai jumpa :D
.... oh iya, ini screenshot hasil akhir kerja kita:
Tidak ada komentar:
Posting Komentar