Membuat Horizontal menu dengan CSS

Hiii ~~ , bertemu lagi dengan penulis tampan dari pulau sebrang , xixixi ~~ . Mungkin sodara2 pengunjung merasa jenuh dengan tutorial web development yang beruturut2 membahas HTML  . Nah , oleh karenanya pada tutor ini penulis akan coba membahas cara membuat Horizontal Menu dengan CSS  . Apabila teori dasar membuat menu sudah anda kuasai , rasanya tidak terlalu sulit untuk membuat menu baik horizontal maupun vertikal . Dari pada kelamaan , ada baik nya kita langsung praktekan

Untuk membuat menu dalam sebuah dokumen html , kita dapat menggunakan tag seperti dibawah ini :

<ul>
<li><a href=”#”>home</a></li>
<li><a href=”#”>about</a></li>
<li><a href=”#”>contact</a></li>
<li><a href=”#”>gallery</a></li>
</ul>

Dengan hanya menggunakan code html saja , maka tampilan yang muncul pada browser akan terlihat seperti gambar di bawah ini :

Nah , untuk itu kita memerlukan seorang bernama “CSS” untuk dapat merubah tampilan menu sesuai keinginan kita .. ~~ .
Langkah pertama yang akan kita lakukan adalah menghapus margin dan padding yang secara default dimiliki tag ul , sperti code di bawah ini :

ul.menunw {
margin:0px;
padding:0px;
}

Kode CSS di atas berpengaruh terhadap elemen kotak list-item . Kita tidak memerlukan lingkaran hitam di setiap item. Untuk itu kita akan membuangnya dengan kode CSS . Di bawah ini codenya :

ul.menunw li {
list-style:none;
}

Teori Dasar Float
Kata kunci float memiliki 3 nilai, right,left , dan none. Nilai none berada pada posisi default . Yang perlu diperhatikan , antara nilai float right ataupun left sama aja . Cuma beda arah nya aja.
Karena kita akan membuat menu horizontal, maka teori dasar dengan kata kunci float bisa kita gunakan disini . Berikut ini code CSS nya :

ul.menunw li {
list-style:none;
float:left;
}

Dari*code CSS di atas, maka elemen kotak akan berubah . Besar nya kotak tergantung dari lebar isi kotak.
Nah , sekarang kita coba menententukan lebar kotak dengan code css , berikut ini code nya :

ul.menunw li {
list-style:none;
float:left;
width:100px;
}

Lalu kita atur agar posisi text berada di tengah , seperti code di bawah ini :

ul.menunw li {
list-style:none;
float:left;
width:100px;
text-align:center;
}

Kemudian kita tentukan tingginya . Untuk menggunakan tinggi , kali ini kita akan menggunakan kata kunci line-height , bukan padding .

ul.menunw li {
list-style:none;
float:left;
width:100px;
text-align:center;
line-height:25px;
}

Berikut nya kita menggunakan tag font , agar terlihat lebih maknyus .. ~~ . Di bawah ini code css nya :

ul.menunw li {
list-style:none;
float:left;
width:100px;
text-align:center;
font:11px/25px verdana,arial,sans-serif;
}

Tapi sayang nya , cara seperti diatas kurang berhasil untuk browser IE . Untuk itu , kita perlu menambahkan 2 baris kode yang membuat code CSS kita dapat berjalan dengan baik pada browser bawaan Windus itu .. ~~

ul.menunw li {
list-style:none;
float:left;
width:100px;
text-align:center;
font:11px/25px verdana,arial,sans-serif;
height:auto !important;
height:25px;
}

Jika kita perhatikan pada tag list-item , tentu ada sebuah link yang ditandai dengan tag a . Maka kita juga perlu untuk membuatkan CSS-nya . Secara default , kotak tag a ditandai dengan kotak berwarna abu-abu.
Pada code di atas , Tag a tidak secara penuh mengisi elemen tag list . Itu dikarenakan elemen tag list Lebarny tergantung pada isi . Untuk itu kita perlu menambahkan kode CSS yang membuat elemen kotak link memenuhi ruang yang ada . Sekaligus menghilangkan garis bawah yang ada di setiap link.

ul.menunw li a {
display:block; /* buat tag link memenuhi ruang yang ada */
text-decoration:none; /* hapus garis bawah */
background:#333333;
color:#000000;
}

Sebenernya sekarang kita sudah selesai. Namun rasanya kurang lengkap jika kita tidak merubah warna background saat mouse berada di atas salah satu kotak . Maka dari itu kita tambahkan code berikut ini.

ul.menunw li a:hover {
background:#000000;
color:#FFFFFF;
}

Selesai lah sudah ! ~~
Dan secara lengkap bisa kita tuliskan seperti di bawah ini:

<ul class=”menunw”>
<li><a href=”#”>home</a></li>
<li><a href=”#”>about</a></li>
<li><a href=”#”>contact</a></li>
<li><a href=”#”>news</a></li>
<li><a href=”#”>gallery</a></li>
</ul>

Dan berikut ini kode CSS-nya:

ul.menunw {
margin:0px;
padding:0px;
}
ul.menunw li {
list-style:none;
float:left;
width:100px;
text-align:center;
font:11px/25px verdana,arial,sans-serif;
height:auto !important;
height:25px;
}
ul.menunw li a {
display:block;
text-decoration:none;
background:#333333;
color:#000000;
}
ul.menunw li a:hover {
background:#000000;
color:#FFFFFF;
}

Dan hasilnya akan terlihat seperti di bawah ini :

Yups , begitulah kira2 cara membuat Horizontal menu dengan menggunakan CSS , akhir kata ……………………………..
selamat mencoba dan sampai jumpa di laen ksempatan , huehuehue .. ~~