RSS Artikel
- SEO Submiter (3155)
- Tips Mempercepat Koneksi Modem IM2 (771)
- Mengetahui Log dan Quota Bandwidth Indosat M2 (627)
- Tutorial: Membuat Menu Navigasi Memakai CSS (493)
- Photoshop: Membuat Tombol Web 2.0 (391)
- Validasi di PHP untuk data yg sama atau duplicate (303)
- Mendaftarkan Website ke Google (236)
- Belajar XHTML dan Web Standards (236)
- HASIL TRY OUT UM UGM 2010 DI BANYUWANGI (621)
- My First Blog (309)
- TRY OUT UM UGM 2010 DI BANYUWANGI (297)
- Doa Yang Membawa Keberuntungan (170)
- Jawaban Dari Segala Kegelisahan yang Melanda Perutku... (158)
- Ngenet Seharian Bersama Baim Wong (149)
- Apakah Singkatan Dari Indowebster? (141)
- IM2 My Presents Conection Profider (115)
Tutorial: Membuat Menu Navigasi Memakai CSS
Diposting oleh : Andang Charisma Perdana
Kategori: CSS - Dibaca: 494 kali
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 navigasi, tapi untuk penggunaan layout web. Maka dari itu, kenapa Macromedia Dreamweaver versi 3 dan 4 sangat laku di kalangan mahasiswa komputer . Karena begitu mudahnya mengatur layout tabel di sana, haha.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. Cobalah membuat CSS menu anda sendiri. Berikut ada contoh membuat menu CSS sederhana, untuk proses belajar anda, yuk ya..
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 anda sudah tahu kalau semua elemen HTML akan dianggap sebagai elemen kotak oleh CSS. Berikut penggambaran kotak dari kode list item di atas.
Membuat Menu Navigasi
Menu navigasi yang akan kita buat adalah yang versi horizontal. Jika teuri dasar membuat menu sudah dikuasai, rasanya tidak terlalu masalah untuk membuat menu vertikal. Langsung saja langkah pertama yang akan kita lakukan adalah manghapus margin dan padding yang secara default dimiliki tag ul.
ul.menu {
margin:0px;
padding:0px;
}
Kode CSS di atas berpengruh 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 si setiap item. Untuk itu kita akan menghilangkannya dengan kode CSS.
ul.menu li {
list-style:none;
}
Teori Kata Kunci Float
Kata kunci float memiliki 3 nilai, yaitu left, right dan none. Nilai none berada pada posisi default. Kira-kira teori float digambarkan pada ilustrasi dai bawah ini.
Yang perlu diperhatikan, antara nilai float left dan right saja. Hanya berbeda arah saja, left ke kiri sedangkan right ke kanan, hehe..
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. 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.
Kita kembali ke menu navigasi. Karena kita akan membuat menu horisontal, maka teori dasar dengan kata kunci float bisa kita gunakan. Coba kita lihat CSS-nya.
ul.menu li {
list-style:none;
float:left;
}
Dari kode CSS di atas, maka elemen kotak sekarang berubah. Lihat perubahanya. Besarnya kotak ternyata te;gantung dari lebar isi kotak.
sekarang tentukan lebar kotak.
ul.menu li {
list-style:none;
float:left;
width:100px;
}
Jangan lupa posisi teks harus berada di tengah.
ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
}
Sekarang kita akan menentukan tingginya. Untuk itu kita gunakan kunci line-height, lebih disarankan ketimbang kunci 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 kode ini 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;
}
Weh kok bisa yak?
Dan ini hasilnya setelah kita tambahkan tinggi.
Link Menu
Jika kita lihat lagi tag list-item, kita ada sebuah link yang ditandai dengan tag a. Maka kita juga perlu membuatkan CSS-nya. Tapi sebelumnya, mari kita lihat bagai mana bentuk kotak tag a sejauh ini. Di gambar bawah ini, kotak tag a ditandai dengan kotak berwarna abu-abu.
Yang menjadi pertanyaan sekarang adalah, kenapa tag a secara penuh mengisi tag list? Ya, salah satunya adalah karena elemen kotak lebarnya bergantung pada isi (kecuali untuk kotak div). 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 proyek kita ini sudah selesai. Tapi rasanya kurang lengkap jika kita tidak merubah warna background saat mouse berada pada area salah satu kotak. Maka dari itu kita tambahkan kode berikut ini.
ul.menu li a:hover {
background:#000000;
color:#FFFFFF;
}
TADDAAA... !! selesai sudah proyek kita kali ini..
Jadi untuk secara lengkap, kode bisa di tuliskan.
Untuk kode Html nya
<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>
Untuk 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;
}
Simpan Artikel ini:
1 Komentar :
jaloe
Hem tutorial yang ciamik, panjang n lumayan jelas, trims..
Isi Komentar :