Animasi Tombol Menu dengan CSS

Admin 0

Berbeda dengan menu animasi dengan css dimana seluruh menu berada pada kotak yang sama, tutorial singkat kali ini mengenai Animasi Tombol Menu dengan CSS dimana setiap menu berada pada kotak yang berbeda dengan masing-masing animasi.

Tombol Menu
Tombol menu yang dibuat tidak menggunakan gambar tetapi dengan kode CSS yang saya beri nama mode-miring, mode-depan, dan mode-pindah. Mode-miring: tombol menu akan berputar sedikit dan warna latar berubah dari orange menjadi kuning, mode-depan: warna latar tombol menu akan berubah dari orange menjadi kuning, mode-pindah: tombol menu akan bergeser ke kanan dan warna latar berubah dari orange menjadi kuning. Perubahan tersebut akan terlihat saat hover (pointer mouse didekatkan).


Tombol menu ini sudah saya coba pada browser internet Mozilla Firefox dan Google Chrome terbaru. 

Berikut langkah-langkahnya:
  1. Login ke Blogger
  2. Back-up tempate blog untuk cadangan kalau terjadi error 
  3. Salin kode CSS di bawah kemudian simpan bersama-sama dengan kode CSS yang lain, pada Blogspot biasanya disimpan di atas kode ]]></b:skin (kode <style type="text/css> dan </style>)  di bawah dihapus (tidak perlu dikopikan). Kode CSS tersebut 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.
  4. Salin kode HTML di bawah dan tempatkan sesuai kebutuhan, misalnya pada widget atau pada posting.
  5. Ganti MENU-1, MENU-2, MENU-3, MENU-4, dan MENU-5 beserta URL masing-masing sesuai link yang besangkutan
  6. Simpan dan publikasikan/ terbitkan.
  7. Kode CSS mode-miring, mode-depan, dan mode-pindah 

<style type="text/css">   #mode-miring,#mode-depan,#mode-pindah{   width:70px;   height:18px;   border:1px solid #999;   box-shadow: 2px 2px 5px #aaa;   padding:5px;   font-size:12px;   font-weight:bold;   background: #faa518;   text-align:center;   -webkit-transition: all 0.4s ease-in-out;   -moz-transition: all 0.4s ease-in-out;   -o-transition: all 0.4s ease-in-out; }  #mode-miring a, #mode-depan a, #mode-pindah a{   color:#000;   text-decoration:none; }  #mode-miring a:hover, #mode-depan a:hover, #mode-pindah a:hover{   color:#0000ff;   background-color:#ffff00;   text-decoration:none; }  #mode-miring:hover {    -webkit-transform: rotate(-7deg) scale(1);    -moz-transform: rotate(-7deg) scale(1);    -o-transform: rotate(-7deg) scale(1);     background:#ffff00; }   ul.menu-semua {   list-style:none;   margin:0;   padding:0; }  ul.menu-semua li{   display:inline-block;   width:85px; }  #mode-depan:hover {    -webkit-transform: scale(1.3);    -webkit-transform: translate(20px,-10px) scale(1.3);   background:#ffff00; }   #mode-pindah:hover  {    margin-left:20px;    padding-left:5px;    background:#ffff00; }  </style> 

Kode HTML

<center>  <ul class="menu-semua">    <li><div id="mode-miring"><a href="URL">MENU-1</a></div></li>    <li><div id="mode-miring"><a href="URL">MENU-2</a></div></li>    <li><div id="mode-miring"><a href="URL">MENU-3</a></div></li>    <li><div id="mode-miring"><a href="URL">MENU-4</a></div></li>    <li><div id="mode-miring"><a href="URL">MENU-5</a></div></li>  </ul> </center>  <center>  <ul class="menu-semua">    <li><div id="mode-depan"><a href="URL">MENU-1</a></div></li>    <li><div id="mode-depan"><a href="URL">MENU-2</a></div></li>    <li><div id="mode-depan"><a href="URL">MENU-3</a></div></li>    <li><div id="mode-depan"><a href="URL">MENU-4</a></div></li>    <li><div id="mode-depan"><a href="URL">MENU-5</a></div></li>  </ul> </center>  <center>  <ul class="menu-semua">    <li><div id="mode-pindah"><a href="URL">MENU-1</a></div></li>    <li><div id="mode-pindah"><a href="URL">MENU-2</a></div></li>    <li><div id="mode-pindah"><a href="URL">MENU-3</a></div></li>    <li><div id="mode-pindah"><a href="URL">MENU-4</a></div></li>    <li><div id="mode-pindah"><a href="URL">MENU-5</a></div></li>  </ul> </center>  

Hasilnya akan seperti di bawah: 
Mode Miring


MENU-1
MENU-2
MENU-3
MENU-4
MENU-5

Mode Depan


MENU-1
MENU-2
MENU-3
MENU-4
MENU-5

Mode Pindah


MENU-1
MENU-2
MENU-3
MENU-4
MENU-5



Mohon dikoreksi jika ada syntax CSS yang salah atau kurang sempurna.
Selamat mencoba dan semoga bermanfaat!


  1. Login ke Blogger
  2. Back-up tempate blog untuk cadangan kalau terjadi error 
  3. Salin kode CSS di bawah kemudian simpan bersama-sama dengan kode CSS yang lain, pada Blogspot biasanya disimpan di atas kode ]]></b:skin (kode <style type="text/css> dan </style>)  di bawah dihapus (tidak perlu dikopikan). Kode CSS tersebut 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.
  4. Salin kode HTML di bawah dan tempatkan sesuai kebutuhan, misalnya pada widget atau pada posting.
  5. Ganti MENU-1, MENU-2, MENU-3, MENU-4, dan MENU-5 beserta URL masing-masing sesuai link yang besangkutan
  6. Simpan dan publikasikan/ terbitkan.
Kode CSS mode-miring, mode-depan, dan mode-pindah 

Kode HTML

Hasilnya akan seperti di bawah: 
Mode Miring



Mode Depan



Mode Pindah





Mohon dikoreksi jika ada syntax CSS yang salah atau kurang sempurna.
Selamat mencoba dan semoga bermanfaat!



Komentar Anda

إرسال تعليق

أحدث أقدم