Membuat menu horizontal dengan variasi tab animasi

Membuat menu horizontal dengan animasi tentu akan sangat menarik, kali ini kita coba membuat menu horizontal dengan animasi tab.


jenis menu ini hanya untuk single line, tidak ada drop menu.

Kita langsung ke TKP saja biar jelas
Langkah Pertama

  • Login ke akun Blogger kamu.
  • Dari halaman dashboard, pilih Edit HTML.
  • Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
  • Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.


.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}


.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/tab-blue-right.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;

}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */


.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}


Simpan dan lihat hasilnya.

Keterangan :
  • Warna Merah, Background image menu
  • Warna Hijau,  Lebar menu dan besar jenis huruf
Langkah kedua
  1. Klik Page Element
  2. Klik Add Gadget
  3.   AddGadget
  4. Klik plus button (+) for HTML/JavaScript. (img)

    HTML
  5. Copy and paste kode dibawah ini

<div class="animatedtabs">
<ul>
<li><a href="#" title="Home"><span>Home</span></a></li>

<li class="selected"><a href="#" title="Menu"><span>Menu</span></a></li>

<li><a href="#" title="Profil"><span>Profil</span></a></li>

<li><a href="#" title="Contact"><span>Contact</span></a></li>

<li><a href="#" title="Tools"><span>Tools</span></a></li>

<li><a href="#" title="HTML"><span>HMTL</span></a></li>

</ul>
</div>


Simpan dan lihat hasilnya.

Keterangan :
  • Warna Merah, Alamat URL yang akan kamu tuju sesuai dengan nama menu 
  • Warna Hijau,  Nama nama menu sesuai dengan kebutuhan
________________________________________________________

Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

Sumber : Web design and Assistance-css play
Labels: ,