Mengenali Rollover Menu Website dengan CSS

Rollover Menu Website dengan CSS

Setelah kemarin membuat tutorial belajar Photoshop, biar tidak jenuh maka kali ini penulis mencoba sesuatu yang lain. Kali ini penulis akan membuat tutorial rollover menu website dengan CSS. Aplikasi yang dipakai yaitu Dreamweaver.
Dengan menu ini maka tampilan website anda akan lebih menarik dan membuat pengunjung semakin betah berlama - lama di website anda, dan juga membuat website anda terlihat lebih profesional dan modern.

Bagaimana cara membuat rollover menu dengan CSS (tanpa javascript) sehingga website tetap ringan dan tidak memberatkan beban server?

ok mari kita ikuti langkah - langkahnya :
Sebelum melangkah lebih lanjut, maka saya terangkan dulu apa yang dimaksud Rollover Menu!
Rollover adalah istilah bila kursor berada disebuah link maka link tersebut akan bereaksi (misal berganti warna,dll). Sebagai contoh, anda bisa melihat menu website dari www.apple.com ,dimana ketika kursor diarahkan ke menu utama maka dia akan berganti warna. (contoh : pada Mac)

gambar : menu website apple
Ok sekarang mari kita membuatnya :
1. Pertama - tama kita buat dulu image background menu untuk rollover menu kita dengan Photoshop
karena disini saya lebih menjelaskan ke tehnik css nya, bukan ke cara mendesainnya, jadi silahkan buka - buka lagi ya pelajaran tentang photoshop dasar hehehe ^_^v (peace!)
oke sebagai contoh saya telah membuat gambar ini :

gambar : background tombol
[kalau malas membuat download disini (klik kanan > save image ke komputer)]
Gambar diatas adalah background tombol yang akan kita pergunakan. Gambar diatas terbagi menjadi 2 bagian, yaitu bagian atas untuk tombol yang tidak ditempati kursor (state), dan bagian kedua adalah bagian aktif ketika ditempati kursor (Over/Rollover)
pada contoh kali ini saya berinama file tersebut dengan nama tombol.gif. Ukuran 125 x 80 pixel

gambar : button.gif
2. Perhatikan gambar diatas, dan perhatikan baik-baik pada ukuran yang saya berikan pada bagian atas. nah ukuran itu yang nanti akan kita pergunakan sebagai ukuran dari tombol. Yang kita perlukan sekarang adalah membuat kode html untuk tombol diatas:

<a href="#">Rollover</a>

Nah kemudian sekarang kita buat untuk CSS nya :

a { display: block; background: url(tombol.gif) top center; /*alamat gambar tombol anda*/ width: 125px /*Lebar Tombol*/ height: 40px /*Tinggi Tombol*/ text-align: center; /*Supaya Teks Ditengah (vertical)*/ line-height: 40px; /*Supaya Teks Ditengah (Horizontal)*/ font-family: Geneva, Arial, Sans-Serif; /*(Jenis Huruf)*/ color: #fff; /*(Warna Huruf)*/ text-decoration: none; /*Jangan pergunakan garis bawah*/ } a:hover { /*Posisi kursor diatas tombol*/ background: url(tombol.gif) bottom center; }

Intinya, kita menukar posisi image pada tombol.gif, bila tidak aktif maka ia menggunakan background bagian atas, ketika aktif maka akan digunakan background bagian bawah. Kenapa kita harus menggunakan display:block? Dikarenakan <a> merupakan inline tag, maka ia harus menggunakan display:block agar menjadi block tag dan dapat merespon link area. Tidak susah kan?