Membuat fly In menu dengan CSS3

Cara Membuat fly In menu dengan CSS3 - Melengkapi beberapa postingan saya sebelumnya. Kali ini saya akan berbagi lagi tentang cara Membuat fly In menu dengan CSS3. Maksudnya adalah membuat menu navigasi dengan efek Fly in/muncul stelah Laman loading sempurna dari kanan. Caranya sangatlah mudah. Anda hanya perlu menambahkan sedikit CSS dan Kode HTML pada template anda.
Berikut cara Membuat fly In menu dengan CSS3:

1. Masuk akun Blogger Sobat.
2. Masuk Tab Rancangan >> Template >> Edit HTML.
3. Masukkan kode berikut tepat sebelum kode ]]></b:skin>

ul#navigation {

  position:fixed;

  margin:0px;

  padding:0px;

  top:0px;

  right:10px;

  list-style:none;

  z-index:999999;

  width:735px;

  font:normal 11px Arial,Sans-Serif;

  -webkit-animation:2s fxhompinav ease-in-out;

  -moz-animation:2s fxhompinav ease-in-out;

  -ms-animation:2s fxhompinav ease-in-out;

  animation:2s fxhompinav ease-in-out;

}

ul#navigation li {

  width:103px;

  display:inline;

  float:left;

  margin:0 0 0 2px;

}

ul#navigation li a {

  display:block;

  float:left;

  margin-top:-78px;

  width:100px;

  height:22px;

  background-color:#111;

  background-repeat:no-repeat;

  background-position:50% 150px;

  border:2px solid #e6e6e6;

  -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);

  -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);

  box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);

  -moz-border-radius:0px 0px 10px 10px;

  -webkit-border-bottom-right-radius:10px;

  -webkit-border-bottom-left-radius:10px;

  -khtml-border-bottom-right-radius:10px;

  -khtml-border-bottom-left-radius:10px;

  border-radius:0px 0px 10px 10px;

  color:#ccc;

  text-decoration:none;

  text-align:center;

  text-shadow:0 1px 1px #000;

  padding-top:85px;

  -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

  -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

  -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

  transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

}

ul#navigation li a:hover {

  margin-top:-3px;

  background-position:50% 10px;

  color:#fff;

  position:relative;

}

ul#navigation li a:hover:after {

  content:"";

  width:0px;

  height:0px;

  position:absolute;

  top:100%;

  left:45%;

  margin-top:-10px;

  border-width:5px;

  border-style:solid;

  border-color:transparent transparent #e6e6e6 transparent;

}

ul#navigation li:nth-child(1) a {

  background-image:url(http://4.bp.blogspot.com/-Yofmy0GpcY0/TtLyWnIr0jI/AAAAAAAABYQ/di5O82hzbrA/s1600/home.png);

}

ul#navigation li:nth-child(2) a {

  background-image:url(http://2.bp.blogspot.com/-2OSziw4y00Y/TtLybmgNpbI/AAAAAAAABZA/CfXysrknh5k/s1600/user.png);

}

ul#navigation li:nth-child(3) a {

  background-image:url(http://4.bp.blogspot.com/-PafE8z-wPaE/TtLya7QCLRI/AAAAAAAABY0/2ggfAcDdL4c/s1600/search.png);

}

ul#navigation li:nth-child(4) a {

  background-image:url(http://4.bp.blogspot.com/-70Y4BlTmU2k/TtLyY5xd4wI/AAAAAAAABYo/3f2DFCIXHSY/s1600/photo_camera.png);

}

ul#navigation li:nth-child(5) a {

  background-image:url(http://3.bp.blogspot.com/-5gyngAu_azs/TtLyaHMRCpI/AAAAAAAABYs/njvXEAaM4AM/s1600/rss_feed.png);

}

ul#navigation li:nth-child(6) a {

  background-image:url(http://1.bp.blogspot.com/-B6GMO8E3wCQ/TtLyXVvr9lI/AAAAAAAABYY/s5EbibQXFGE/s1600/ipod.png);

}

ul#navigation li:nth-child(7) a {

  background-image:url(http://3.bp.blogspot.com/-m9LeNCW7A4s/TtLyYIsDygI/AAAAAAAABYc/TBmNRPoQZ3s/s1600/mail.png);

}

@-webkit-keyframes fxhompinav {

  from{margin-right:-1000px;}

  to  {margin-right:0px;}

}

@-moz-keyframes fxhompinav {

  from{margin-right:-1000px;}

  to  {margin-right:0px;}

}

@-ms-keyframes fxhompinav {

  from{margin-right:-1000px;}

  to  {margin-right:0px;}

}

@keyframes fxhompinav {

  from{margin-right:-1000px;}

  to  {margin-right:0px;}

}

4. Lalu cari kode </body> Dan masukkan Kode berikut tepat di atasnya.

<ul id='navigation'>

     <li><a href='#'>Home</a></li>

     <li><a href='#'>About</a></li>

     <li><a href='#'>Search</a></li>

     <li><a href='#'>Photos</a></li>

     <li><a href='#'>Rss Feed</a></li>

     <li><a href='#'>Podcasts</a></li>

     <li><a href='#'>Contact</a></li>

</ul>

Catatan: Ganti kode warna merah sesuai dengan keinginan anda.

5. Simpan template dan lihat hasilnya.

Sekian dari saya. Semoga artikel kecil ini dapat sedikit membantu.