blog, tutorial
Tutorial: Buat menu navigasi yuk
October 3rd, 2006
Dulu, saat era sebelum CSS mulai booming, menu navigasi dibuat dengan menggunakan layout dengan tabel. Entah itu horizontal atau vertikal. Bahkan bukan saja untuk menu, tapi untuk penggunaan layout web. Maka dari itu, kenapa Macromedia Dreamweaver versi 3 dan 4 sangat laku di kalangan mahasiswa komputer (waktu jaman masih kuliah). Karena begitu mudahnya mengatur layout tabel di sana.
Sekarang, sematik mulai bicara. Penggunaan menu navigasi dibuat dengan menggunakan list-item tag. Jujur saja, awalnya cukup bingung melihat kode list-item yang biasa menampilkan daftar list bisa berubah menjadi menu navigasi. Yuk, kita lihat bagaimana CSS bekerja dengan list-item ini.
Tag list-item
<ul class=”menu”>
<li><a href=”home.html”>home</a></li>
<li><a href=”about.html”>about</a></li>
<li><a href=”contact.html”>contact</a></li>
</ul>
Hasil tanpa menggunakan CSS:
Mungkin diantara kita sudah tahu, semua elemen HTML akan dianggap sebuah elemen kotak oleh CSS. Berikut kira-kira penggambaran kotak dari kode list-item di atas.
Membuat menu navigasi
Menu navigasi yang akan kita buat adalah yang versi horizontal. Jika teori dasar membuat menu sudah dikuasai, rasanya tidak terlalu masalah untuk membuat menu vertikal. Langkah pertama yang akan kita lakukan adalah menghapus margin dan padding yang secara default dimiliki tag ul.
ul.menu {
margin:0px;
padding:0px;
}
Kode CSS di atas berpengaruh terhadap elemen kotak list-item. Kira-kira elemen kotak akan berubah menjadi seperti gambar di bawah ini.
Hapus lingkaran di setiap item
Kita tidak memerlukan lingkaran hitam di setiap item. Untuk itu kita akan membuangnya lewat kode CSS. Berikut kodenya.
ul.menu li {
list-style:none;
}
Teori kata kunci float
Kata kunci float mempunyai 3 nilai, left, right, dan none. Nilai none berada pada posisi default. Kira-kira teori float digambarkan pada ilustrasi di bawah ini.
Yang perlu diperhatikan, antara nilai float left dan right sama saja. Hanya berbeda arah saja.
Nomor 1
Jika terdapat 3 kotak bernilai float:left, maka ketiga kotak tersebut akan berada sejajar dengan kotak sebelumnya.
Nomor 2
Jika 3 kotak yang berada di nomor 1 mempunyai pembatas yang juga berupa kotak. Eh, tambah satu lagi deh kotaknya. Ada 3 kotak dengan lebar 100 piksel tiap kotaknya, sedangkan kotak pembatas hanya mempunyai lebar 350 piksel. Itu berarti kurang 50 piksel lagi. Untuk itu kotak terakhir turun ke baris berikutnya.
Got it? Harus!
Kita kembali ke menu navigasi. Karena kita akan membuat menu horisontal, maka teori dasar dengan kata kunci float bisa kita gunakan. Kita lihat kode CSS-nya.
ul.menu li {
list-style:none;
float:left;
}
Dari kode CSS di atas, maka elemen kotak sekarang berubah. Lihat perubahannya. Besarnya kotak ternyata tergantung dari lebar isi kotak.
Sekarang kita tentukan lebar kotak.
ul.menu li {
list-style:none;
float:left;
width:100px;
}
Jangan lupa, posisi text harus di tengah
ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
}
Sekarang kita akan tentukan tingginya. Untuk menggunakan tinggi, akan lebih baik menggunakan kata kunci line-height daripada padding.
ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
line-height:25px;
}
tapi akan lebih baik lagi jika kita menggunakan tag font. Lihat kodenya baik-baik.
ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
font:11px/25px verdana,arial,sans-serif;
}
Tapi sayang, cara ini kurang berhasil di IE. Untuk itu, kita perlu menambahkan 2 baris kode yang membuat kode CSS kita berjalan dengan baik.
ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
font:11px/25px verdana,arial,sans-serif;
height:auto !important;
height:25px;
}
Loh, kok bisa? silahkan lihat lagi tutorial yang pernah aku tulis sebelumnya. Dan inilah hasilnya setelah kita tambahkan tinggi.
Link Menu
Jika kita lihat lagi tag list-item, kita lihat ada sebuah link yang ditandai dengan tag a. Maka kita juga perlu untuk membuatkan CSS-nya. Tapi sebelumnya, mari kita lihat bagaimana bentuk kotak tag a sejauh ini. Di gambar di bawah ini, kotak tag a ditandai dengan kotak berwarna abu-abu.
Yang menjadi pertanyaan, kenapa tag a tidak secara penuh mengisi tag list? Ya, salah satunya, karena ELEMEN KOTAK LEBARNYA BERGANTUNG PADA ISI (kecuali untuk tag div) CMIIW. Untuk itulah kita perlu menambahkan kode CSS yang membuat elemen kotak link memenuhi ruang yang ada. Oh iya, sekaligus menghilangkan garis bawah yang dipunyai setiap link.
ul.menu li a {
display:block; /* buat kotak link memenuhi ruang yang ada */
text-decoration:none; /* hapus garis bawah */
background:#EFEFEF;
color:#000000;
}
Nah, kode CSS akan berubah menjadi seperti gambar di bawah ini.
Nah, sekarang sebenarnya kita sudah selesai. Tapi rasanya kurang lengkap jika kita tidak merubah warna background saat mouse berada di atas salah satu kotak. Maka dari itu kita tambahkan kode berikut ini.
ul.menu li a:hover {
background:#000000;
color:#FFFFFF;
}
Selesai!
Jadi, secara lengkap bisa kita tuliskan berikut ini:
<ul class="menu">
<li><a href="home.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
Dan inilah kode CSS-nya:
ul.menu {
margin:0px;
padding:0px;
}
ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
font:11px/25px verdana,arial,sans-serif;
height:auto !important;
height:25px;
}
ul.menu li a {
display:block;
text-decoration:none;
background:#EFEFEF;
color:#000000;
}
ul.menu li a:hover {
background:#000000;
color:#FFFFFF;
}
Ayo dong, kasih usul apalagi tutorial berikutnya. Kalau review design orang (seperti yang diusulkan mas Firman), sepertinya aku ini udah paling jago aja, padahal mah kagak. Drupal (seperti yang diusulkan Fany)? wekekeke… kagak bisa. Belum mulai belajar karena belum ada projek pakai drupal… :D
Daftar sekarang juga untuk cara gampang dapat uang lewat blog
mmmm …. langkah2 yang sangat meng-ispirasi … :)