Membuat Menu Animasi Dengan CSS

Menu Animasi kali ini tidak menggunakan program Javascript dan tanpa menggunakan gambar sama sekali. Menu Animasi dibuat dengan kode CSS dan HTML, hanya saja kemungkinan beberapa browser lama belum mendukung. Animasi menu ini sudah saya uji dan bekerja normal di browser terbaru Mozilla Firefox dan Google Chrome.

Agar lebih menarik, warna latar dapat diganti dengan gambar seperti halnya tombol menu dengan gambar, namun satu hal yang perlu diperhatikan, kapasitas file gambar jangan tertalu besar karena selain dapat menghemat bandwidth juga dapat mempercepat loading.

OK, berikut adalah langkah-langkah membuat menu animasi dengan CSS.

1. Sebaiknya back-up dulu tempate blog sebagai cadangan jika terjadi error.
2. Salin salah kode CSS di bawah kemudian simpan bersama-sama dengan kode CSS yang lain (pada Blogspot biasanya disimpan di atas tetapi kode ]]></b:skin (<style type="text/css> dan </style>)  di bawah dihapus (tidak perlu dikopikan). Kode CSS dapat juga disimpan di bagian Widget blog dengan cara Add Gadgate, atau diletakan pada posting pada mode HTML (bukan pada mode Compose). Untuk kedua opsi terakhir kode <style type="text/css> dan </style> harus ikut dikopikan.
3. Salin kode HTML di bawah dan tempatkan sesuai kebutuhan, misalnya pada widget atau pada posting.
4. Ganti Home, About, Contact, Downloads, dan Privacy beserta URL masing-masing sesuai link yang besangkutan
5. Simpan dan publikasikan/ terbitkan.
6. Selesai

Contoh 1. Menu Animasi Berputar dan Membesar

Kode CSS 1
<style type="text/css"> #mode-putar{ width:140px; height:80px; border:1px solid #999; box-shadow: 5px 3px 5px #aaa; margin:5px auto; padding:5px; background:#9bbddd; font-size:12px; font-weight:bold; background-color: yellow; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; } #mode-putar:hover { -webkit-transform: rotate(360deg) scale(1.5); -moz-transform: rotate(360deg) scale(1.5); -o-transform: rotate(360deg) scale(1.5); } </style>
Kode HTML 1
<div id="mode-putar"> <a href="URL Home">HOME</a> <a href="URL About">ABOUT</a> <a href="URL Contact">CONTACT</a> <a href="URL DOwnload">DOWNLOAD</a> <a href="URL Privacy">PRIVACY</a> </div>
Hasilnya

HOME
ABOUT
CONTACT
DOWNLOAD
PRIVACY

Contoh 2. Menu Animasi Membesar
Kode CSS 2

<style type="text/css"> #mode-maju { width:140px; height:100px; border:1px solid #999; box-shadow: 5px 3px 5px #aaa; margin:5px auto; padding:5px; background:#9bbddd; font-size:12px; font-weight:bold; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; } #mode-maju:hover { -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); } </style>

Kode HTML 2

<div id="mode-maju"> <a href="URL Home">HOME</a> <a href="URL About">ABOUT</a> <a href="URL Contact">CONTACT</a> <a href="URL Download">DOWNLOAD</a> <a href="URL Privacy">PRIVACY</a> </div>

Hasilnya

HOME
ABOUT
CONTACT
DOWNLOAD
PRIVACY

Selamat mencoba, semoga bermanfaat!