Rollover Menu Website dengan CSS

Publish: 25 November 2013 | Author & Copyright: Johan | Status: FREE tutorial Dreamweaver

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 :

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?

Versi demonya KLIK DISINI

Mau Download sourcenya untuk belajar?

Download Disini

Anda bisa memodifikasi dan mengembangkannya sendiri untuk keperluan website anda, terima kasih, semoga bermanfaat (keep Smile)

Tutorial Terkait :
« Membuat Drop Down Menu Sederhana di Website

Info dan Kontak Penulis

Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai desain grafis. Saat ini bekerja sebagai freelancer designer grafis
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

Penulis dapat dihubungi via:
Email : johan.felisitas[at]gmail[dot]com

Rekomendasi ilmugrafis

Jasa Desain Grafis Terpercaya
Dapatkan jasa desain grafis berkualitas dari team ilmugrafis