Dengan membaca judul diatas, Anda pasti mengira-ngira. Kalau tidak ada JavaScript apakah mungkin membuat sebuah menu rollover? Bagi yang belum mengetahui menu rollover, akan penulis jelaskan. Menu Rollover adalah sebuah menu yang akan memberikan indikasi tertentu bahwa si menu sedang di sorot oleh pointer mouse.
Anda bisa mendapatkan banyak script rollover di internet, yang rata-rata memberikan JavaScript. Jika membuat menu rollover tanpa JavaScript, apakah yang akan kita gunakan ? Jawabannya adalah CSS (Cascading Style Sheet). CSS sebenarnya bertujuan untuk memperindah tampilan web, terlepas dari coding web itu sendiri. Dengan sedikit trik kita akan membuat CSS menjadi sebuah rollover script.
Kenapa menggunakan CSS? Apakah JavaScript saja belum cukup? Jawabannya bukanlah pada cukup atau tidaknya, tapi kecepatan akses dari JavaScript dan CSS berbeda sekali. Anda bisa menguji kecepatan akses sebuah script rollover dengan CSS dan rollover dengan JavaScript ketika telah diupload pada web server.
Kita mulai saja membuat script rollover ini. Yang perlu Anda siapkan adalah sebuah text editor (KATE, QuantaPlus, Kedit) sesuai dengan selera anda, dan sebuah browser. Untuk diketahui sebelumnya, script ini telah diuji oleh penulis di Internet Browser Konqueror, Mozilla, Galeon dan Internet Explorer.
Langkah pertama, kita buat terlebih dahulu sebuah halaman HTML yang berisikan menu-menu rollover. Ketikkan code berikut:
Tabel 1.1 Code rollover.html
Anda diharapkan telah mengetahui Programming HTML dengan baik, dan rasanya code diatas tidak begitu terasa susah bukan?
Sekarang kita masuk ke code CSS nya. Buatlah sebuah file dengan nama style.css yang akan kita gunakan nanti, atau terserah apapun namanya menurut selera Anda.
Tabel 1.2 Code style.css
Disini penulis akan menjelaskan satu-persatu arti dari code style.css ini.
Pertama Anda buat sebuah class bernama menu yang ditandai dengan .(dot)menu kemudian blok progam nya diawali dan diakhiri dengan tanda kurung kurawal ({})
Setiap baris perintah diakhiri dengan tanda titik koma (;)
Kita mulai dahulu dari class .menu
- border-style:solid ini menunjukkan kalau menu kita nanti akan berwujud sebuah kotak dengan bingkai garis utuh. Value Solid di properti ini bisa Anda ganti-ganti dengan dotted dan dashed, disesuaikan dengan selera.
- border-width:2px ini menunjukkan ketebalan bingkai anda. Anda bisa mencoba mengganti 2px dengan npx sesuai selera.
- border-color:#0f0f0f ini menunjukkan warna dari bingkai itu sendiri. Valuenya bisa ganti dengan warna yang Anda sukai.
- width:150 berarti lebar kotak yang akan Anda buat adalah 150 pixel, value ini harus disesuaikan dengan content dari menu itu sendiri.
- color:#000000 berarti warna huruf menu adalah hitam. Silahkan mengganti value ini sesuai selera.
- background:#cccccc berarti warna latar dari kotak Anda adalah abu-abu. Value ini juga boleh Anda ganti sesuai selera.
- font-size:11px menunjukkan bahwa menu akan menggunakan font dengan ukuran 11 pixel, 11px boleh Anda ganti.
- font-family:verdana menunjukkan bahwa menu menggunakan font verdana. Anda bisa mengganti value ini dengan Arial, Tahoma, Helvetica dan sebagainya.
Sekarang kita masuk ke class .menu a. Alphabet a disini menunjukkan elemen link dalam HTML (<a href>)
- width:150 disini sebenarnya kurang berarti karena telah di definisikan di class .menu. Width disini untuk mencegah bug/error pada Browser Internet Explorer.
- color:#000000 berarti warna huruf menu adalah hitam. Silahkan mengganti value ini sesuai selera.
- text-decoration:none ini akan menghilangkan atribut link yang umumnya berbentuk garis bawah (Underline). Selain none value ini bisa diganti dengan underline, overline dan line-through.
- display:block karena link yang kita buat hanya huruf saja, maka area diluar kotak tidak bisa di rollover, maka gunakan properti ini untuk mengaturnya. Dengan demikian link kita juga akan bisa berfungsi walau pointer mouse hanya diarahkan ke kotak (tanpa ke huruf).
Sekarang kita ke class .menu a:hover {}
Hover disini berarti link akan berubah ketika pointer mouse kita melewati (hover) sebuah link. Properti dalam class ini tidak jauh berberda dengan class .menu a. Yang bertambah disini adalah properti background:#0099ff yang akan merubah warna latar kotak menjadi biru muda, dan color:#ffffff yang merubah warna huruf menjadi putih.
Anda juga bisa membuat sebuah class baru untuk link yang telah dikunjungi dengan membuat sebuah class .menu a:visited {}. Sekarang kita harus meng-include code style.css kita ke rollover.html. Edit kembali rollover.html Anda, dan ubahlah baris berikut:
<title>Menu Roll Over dengan CSS</title>
</head>
menjadi
<title>Menu Roll Over dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
kemudian tambahkan class="menu" pada div pada table. Sehingga dari
<div align="center"><a href="index.php">Home</a></div>
menjadi
<div align="center" class="menu"><a href="index.php">Home</a></div>
Lakukan ini pada semua div. Dan sekarang coba jalankan HTML Anda pada browser. Rollover tanpa JavaScript milik Anda pun telah selesai. Cepat dan mudah.
Gambar 1. Rollover.html
Source code lengkap dari script di atas bisa di download di cssrollover1.zip.
Demikianlah tulisan sederhana mengenai pembuatan efek rollover untuk menu pada web dengan menggunakan CSS (Cascading Style Sheet). Semoga bermanfaat bagi Anda semua.
Terimakasih.