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.
Tidak ada komentar:
Posting Komentar