Membuat menu horizontal dengan Tab Animasi warna warni

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

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.


#info {height:auto;}

#outer {display:block; position:relative; background:transparent; padding:2em; text-align:center; margin:40px 15px;}
#outer h2 {margin-bottom:1em;}

#navigation {background:transparent; margin:0 auto; height:3em;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }

#navigation ul {margin:0; padding:0; list-style-type:none; background:transparent;}
#navigation li {display:block; float:left; margin:0 1px;}
.snazzy {background:transparent;}
.snazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;}

.b1, .b2, .b3, .b4 {display:block; font-size:1px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;}
.b1 {margin:0 5px; background:#fff;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}
.boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;}

a.menu, a.menu:visited {display:block; text-decoration:none; width:5.5em;}
a.menu:hover {background:transparent; cursor:pointer;}
a.menu:hover span {padding-top:10px; background:#888;}
a:menu:hover b {background:#888;}

.red {background:#c00;}
.orange {background:#f90;}
.yellow {background:#b8b800;}
.green {background:#090;}
.blue {background:#00c;}
.indigo {background:#309;}
.violet {background:#c6c;}
.grey {background:#888;}

a:hover b.red {background:#888;}
a:hover b.orange {background:#888;}
a:hover b.yellow {background:#888;}
a:hover b.green {background:#888;}
a:hover b.blue {background:#888;}
a:hover b.indigo {background:#888;}
a:hover b.violet {background:#888;}

.active {padding-top:10px; background:#888; cursor:default;}


#navigation2 {clear:both; background:transparent; margin:0 auto; height:3em;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }

#navigation2 ul {margin:0; padding:0; list-style-type:none; background:transparent;}
#navigation2 li {display:block; float:left; margin:0 1px;}

.pad {display:block; height:1em;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }

a.menu2, a.menu2:visited {display:block; text-decoration:none; width:5.5em;}
a.menu2:hover {background:transparent; cursor:pointer;}
a.menu2:hover .boxcontent {padding-bottom:0.8em; background:#888;}
a.menu2:hover .pad {height:0.2em;}

Simpan dan lihat hasilnya.

Keterangan :
  • Warna Merah, Kode untuk animasi tab arah ke bawah
  • Warna Hijau,  Kode untuk animasi tab arah ke atas
  • Copy paste kode di atas secara keseluruhan warna merah dan hijau hanya menunjukan tempat untuk editing apabila kamu ingin merubah warna atau lainnya ( background, lebar menu, tinggi menu )
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
Kode-1 untuk Tab animasi arah ke bawah :

<div id="info">
<div id="outer">
<div id="navigation">
<ul>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent red">1</span>
<b class="b4 red"></b><b class="b3 red"></b><b class="b2 red"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent orange">2</span>
<b class="b4 grey"></b><b class="b3 grey"></b><b class="b2 grey"></b><b class="b1"></b>
</b></a>
</li>
<li>

<a class="menu" href="#"><b class="snazzy"><span class="boxcontent yellow">3</span>
<b class="b4 yellow"></b><b class="b3 yellow"></b><b class="b2 yellow"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent green">4</span>
<b class="b4 green"></b><b class="b3 green"></b><b class="b2 green"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent blue">5</span>
<b class="b4 blue"></b><b class="b3 blue"></b><b class="b2 blue"></b><b class="b1"></b>
</b></a>
</li>

<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent indigo">6</span>
<b class="b4 indigo"></b><b class="b3 indigo"></b><b class="b2 indigo"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent violet">7</span>
<b class="b4 violet"></b><b class="b3 violet"></b><b class="b2 violet"></b><b class="b1"></b>
</b></a>
</li>
</ul>

</div> <!-- end of navigation --></div></div>

Simpan dan lihat hasilnya.

Kode-2 untuk Tab animasi arah ke atas :

<div id="navigation2">
<ul>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 red"></b><b class="b3 red"></b><b class="b4 red"></b><span class="boxcontent red">1</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 orange"></b><b class="b3 orange"></b><b class="b4 orange"></b><span class="boxcontent orange">2</span>
</b></a>
</li>
<li>

<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 yellow"></b><b class="b3 yellow"></b><b class="b4 yellow"></b><span class="boxcontent yellow">3</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 green"></b><b class="b3 green"></b><b class="b4 green"></b><span class="boxcontent green">4</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 blue"></b><b class="b3 blue"></b><b class="b4 blue"></b><span class="boxcontent blue">5</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 indigo"></b><b class="b3 indigo"></b><b class="b4 indigo"></b><span class="boxcontent indigo">6</span>

</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 violet"></b><b class="b3 violet"></b><b class="b4 violet"></b><span class="boxcontent violet">7</span>
</b></a>
</li>
</ul>

</div> <!-- end of navigation2 -->
<!-- end of outer -->

<!-- end of info -->


Simpan dan lihat hasilnya.

Keterangan :
  • Silahkan pilih salah satu kode yang akan kamu gunakan kode-1 atau kode 2 ( kamu bisa gunakan kedua duanya sekaligus )
  • Warna Merah, Nama nama menu sesuai dengan kebutuhan
  • Warna Hijau,  Alamat URL yang akan kamu tuju sesuai dengan nama menu
________________________________________________________

Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

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