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

About Mahdi e

- Berbagi itu indah -

4 comments:

  1. thnx kodenya..lagi ngutak-ngatik kode buat bikin menu navigasi nih...

    BalasHapus
  2. trus caranya buat submenunya gimana ? mohon bantuannya

    BalasHapus
  3. @nawang.. untuk menu ini tanpa submenu
    silakan lihat item lain yang pakai submenu..!
    makasih... salam sukses..!

    BalasHapus
  4. Tab menunya Sudah saya pasang sob di blog ane... dan hasilnya mantap euy...

    BalasHapus

Note :

Komentar yang mengandung usur pornografi / sara / kekerasan akan dihapus.
Terima kasih komentarnya...!
Semoga bermanfaat...!