Home
CSS menurut saya
sebuah teknologi yang powerfull dalam menyusun tampilan sebuah web atau
blog. Ini dibuktikan sekarang css terus dikembangkan dan digunakan
hampir 99% pengembang web, yang 1% nya mungkin masih dalam tahap
belajar.
Kali ini saya akan berbagi tips sedikit tentang bagaimana membuat menu sederhana dengan html+css.
Pertama kita membuat dulu serangkaian hyperlink dalam area <body>..</body> yang disusun dalam sebuah HTML list dengan kode :
<div id="menuku"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> |
Jika kita simpan, kode diatas akan menghasilkan tampilan seperti berikut :
Kemudian kita membuat
susunan kode css yang nantinya mengubah tampilan dari menu yang sudah
dibuat. Untuk css kita letakkan di bagian <head>..</head>,
kodenya bisa dilihat berikut :
<style type="text/css">
DIV#menuku {
/* ini digunakan untuk mengatur bingkai menu */
width: 400px; /* digunakan untuk mengatur lebar bingkai menu */
margin: 0 auto; /* digunakan untuk mengatur posisi menu ditengah halaman */
padding: 10px; /* digunakan untuk mengatur jarak bingkai dengan menu */
background-color: #404040;
}
DIV#menuku ul {
/* ini digunakan untuk merubah tampilan list */
list-style: none; /* digunakan untuk menghilangkan simbol list */
margin: 0; /* digunakan untuk menghilangkan jarak list dengan bingkai menu */
padding: 0; /* sda */
}
DIV#menuku ul li {
display: inline; /* mengubah list menjadi horizontal */
padding-right: 5px; /* mengatur jarak list item */
}
DIV#menuku ul li a {
/* digunakan untuk mengatur hyperlink yang sudah dibuat */
background-color: #aaaaaa; /* warna background tulisan */
padding: 3px 10px 3px 10px; /* memberi efek kotak pada tulisan */
color: white; /* memberi warna tulisan */
border:1px dotted #fff; /* memberi garis luar kotak hyperlink */
text-shadow: 1px 1px #000; /* efek bayangan pada tulisan */
text-decoration:none; /* menghilangkan garis bawah */
/* dengan konfigurasi diatas hyperlink akan terlihat berbentuk kotak */
}
DIV#menuku ul li a:hover {
/* digunakan untuk mengatur tampilan hyperlink pada saat mouse diatasnya */
background-color: silver;
}
</style>
|
Setelah selesai menulis cssnya dan kita simpan maka hasil akhir akan berubah seperti berikut :
Kita juga bisa menggunakan background gambar atau model-model lainya yang dipasang melalui css, insyaallah lain kali dibahas.
