Slide/Larva menu css3

Mungkin anda pernah melihat atau bahkan menggunakan sebuah menu horizontal yang sering disebut sebagai larva menu atau slide menu. Jika sebelumnya kita harus menggunakan jQuery, maka kali ini kita hanya butuh css3 animation dan css3 transition. Tak banyak kode css yang digunakan namun hasil yang diperoleh sangatlah menakjubkan. Anda boleh membandingkannya dengan yang dibuat menggunakan javascript atau jQuery!

Cara membuat

Untuk membuat menu animasi 3 dimensi ini di blogger, anda harus membuat sebuah elemen baru yang bebas dari pengaruh kode css default blogger. Silahkan ikuti panduannya melalui link di bawah ini:

Elemen Baru untuk membuat Menu Horizontal di Blogger

Kode CSS

ul.slidemenu, ul.slidemenu li{padding:0;margin:0;}
html{
      -webkit-animation: sabarifix infinite 1s;
}
@-webkit-keyframes sabarifix{
      0% {zoom:1;} 
      100% {zoom:1;}
}
ul.slidemenu{
      padding:0 20px;
      margin:0 auto;
      list-style:none;
      height:42px;
      background:#999;
      position:relative;
      border:1px solid #999;
      border-radius:3px;
      background:#999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHk-a-7T-inGmGFsdb9HjbDuz7vIOyLqEksdQZhvDTsHWG4mAxeOUcwI9mxoWlJS_uF-1Ilc5Xg2DSakNiI5s-_XegN66Z4xfOB0-jRYM9LpWNB2vRaf-lnKHLDiRc09uwYzLTKT6HF89A/h120/red-grad-1x50.gif) top center repeat-x;;
}
.slidemenu li{
      float:left;
      position:relative;
      z-index:10;
      margin:5px 0;
}
.slidemenu li.slide{
      position:absolute;
      left:21px;
      top:5px; 
      width:100px;
      height:28px;
      z-index:1;
      border-radius:12px;
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHBc1H2Y0zgVjr9AnEFmsWGRp8kJZQtcZZyjvmZCdm7LDsZvCH-IlUg8Hw1JaFVjaZCz1u0xJPbebi0FQGbT2rdcFtjksZje-fgjqaEGnVil4dVaP2J95HQTA3-Fkmy7EcK4pkJG6PEVR5/h120/bg-slidemenu-light3.jpg) 50% 26% no-repeat;
      box-shadow:-2px -1px 1px #666, 1px 0px 1px rgba(255,255,255,0.6);
      border:1px solid #eee;
      transition: 0.25s;
      -o-transition: 0.25s;
      -ms-transition: 0.25s;
      -moz-transition: 0.25s;
      -webkit-transition: 0.25s;
}
.slidemenu li.current ~ li.slide {left:120px;}
.slidemenu li a{
      display:block;
      width:100px;
      letter-spacing:-1px;
      line-height:41px;
      color:#000;
      text-shadow:1px 1px 1px #aaa;   
      font-family:arial, sans-serif;
      font-size:16px;
      font-weight:normal;
      float:left;
      text-decoration:none;
      text-align:center;
      transition:1s ease-out; 
      -o-transition:1s ease-out;
      -ms-transition:1s ease-out;
      -moz-transition:0.6s ease-out 0.4s;
      -webkit-transition:1s ease-out;
}
.slidemenu li:hover a{
      color:#0ff;
      text-shadow:1px 1px 1px #000;
}
* html .slidemenu li a:hover{
      background:#0cf;/* for IE6 */
      color:#c60;
} 
.slidemenu li.p1:hover ~ li.slide {left:20px;}
.slidemenu li.p2:hover ~ li.slide {left:120px;}
.slidemenu li.p3:hover ~ li.slide {left:220px;}
.slidemenu li.p4:hover ~ li.slide {left:320px;}
.slidemenu li.p5:hover ~ li.slide {left:420px;}
.slidemenu li.p6:hover ~ li.slide {left:520px;}
.slidemenu li.p7:hover ~ li.slide {left:620px;}
.slidemenu li.p8:hover ~ li.slide {left:720px;}
.slidemenu li.p9:hover ~ li.slide {left:820px;}

xHTML

<ul class="slidemenu">
<li class="p1"><a href="URL">HOME</a></li>
<li class="p2 current"><a href="URL">SUMATERA</a></li>
<li class="p3"><a href="URL">SULAWESI</a></li>
<li class="p4"><a href="URL">JAWA</a></li>
<li class="p5"><a href="URL">PAPUA</a></li>
<li class="p6"><a href="URL">KALIMANTAN</a></li>
<li class="p7"><a href="URL">ROTI</a></li>
<li class="p8"><a href="URL">BALI</a></li>
<li class="slide"></li>
</ul>