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>Dengan hanya menggunakan code html saja , maka tampilan yang muncul pada browser akan terlihat seperti gambar di bawah ini :
<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>

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 {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 :
margin:0px;
padding:0px;
}
ul.menunw li {Teori Dasar Float
list-style:none;
}
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 {Dari*code CSS di atas, maka elemen kotak akan berubah . Besar nya kotak tergantung dari lebar isi kotak.
list-style:none;
float:left;
}
Nah , sekarang kita coba menententukan lebar kotak dengan code css , berikut ini code nya :
ul.menunw li {Lalu kita atur agar posisi text berada di tengah , seperti code di bawah ini :
list-style:none;
float:left;
width:100px;
}
ul.menunw li {Kemudian kita tentukan tingginya . Untuk menggunakan tinggi , kali ini kita akan menggunakan kata kunci line-height , bukan padding
list-style:none;
float:left;
width:100px;
text-align:center;
}

ul.menunw li {Berikut nya kita menggunakan tag font , agar terlihat lebih maknyus ..
list-style:none;
float:left;
width:100px;
text-align:center;
line-height:25px;
}

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

ul.menunw li {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.
list-style:none;
float:left;
width:100px;
text-align:center;
font:11px/25px verdana,arial,sans-serif;
height:auto !important;
height:25px;
}
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 {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.
display:block; /* buat tag link memenuhi ruang yang ada */
text-decoration:none; /* hapus garis bawah */
background:#333333;
color:#000000;
}
ul.menunw li a:hover {Selesai lah sudah !
background:#000000;
color:#FFFFFF;
}

Dan secara lengkap bisa kita tuliskan seperti di bawah ini:
<ul class=”menunw”>Dan berikut ini kode CSS-nya:
<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>
ul.menunw {Dan hasilnya akan terlihat seperti di bawah ini :
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;
}

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

0 komentar:
Posting Komentar