Membuat 'Fly And Slide Out Menu' dengan Css3

Fly anda Slide Out Menu ini mempunyai tampilan yang sangat menarik. Tampilan menu ini mempunyai keunikan yaitu dengan cara bergerak apabila kita arahkan mouse ke salah satu menu. Selain itu juga menu ini datang dari arah kanan atas dan berhenti pada posisi yang sudah kita tetapkan. 

Kode Css3 ini sebenarnya asli buatayan saudara Taufik Noorohman. Yang dilengkapi dengan icon dari menunya masing-masing. Berikut demo dari Fly and Out Menu tersebut:

Atau lihat langsing di sini DEMO.

Jika sobat bloggertertarik dengan tampilan menu tersebut, silahkan ikuti langkah-langkah yang akan saya berikan.
Pertama: Pastikan anda sudah Login dengan account anda dan anda sudah berada pada Dasbor blog anda.
Kedua: Pada dasbor blog, pilih Edit HTML ==>> Lanjutkan dan jangan lupa centang Expand Widget Templates.
Ketiga: cari kode ]]></b:skin> dan letakkan kode Css3 berikut diatasnya.

ul#navigation {
position:fixed;
margin:0px;
padding:0px;
top:0px;
right:10px;
list-style:none;
z-index:999999;
width:820px;
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:#9E242C;
background-repeat:no-repeat;
background-position:50% 150px;
border:3px solid #303030;
-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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-b720B-FA9MBLzFsIfjLitaXfN5naTQePID_jwUZt9EucLQQ75u7xYw75RPzL3sNz3BYUFeNAnRARc-ApexfSvK-jhgWvPUoljXOcMt2GUQ8DeeEKasxdeaq_21DoOQNO4FopE3nmqH0/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX4uYa8BA265bAlvTNsUrwnOGS1bInJzLXjyYMZgYBpv25ryKf-24xdKAM_gd1XcYuNDSJ2gzAN4veotDEmsge0cnL1TkUl53eU7YK2Due7RC7_SNl5b-XT4eEcEweTPQPdHgNDvZpeD0/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPR5oeNu8J2YgEwCwUSiwvAj38SbatZARdRI3vd17_54FmZPXWCQ2izXN9P7oDCSQeQUrmTK-DxIZ_ouIee-vkG2n1h00xzUDS9EppIgqbQjTRXM5zcflM6kNOVYbREZ5dlptUN95agPQ/s1600/mail.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv-cfy4I0mKbp_8EL_hGwnpR3SR-qyvtOm1Ig3q6ZVhzdKTtwVuKHYTwE_MWa8ynUBA0YJnBORDp1sZ0IGm0hs9ZcW90StH5uMpxsoiJEhLnexrp7oJ2aORykU9QLUzpbMmTlDFI07kGY/s1600/rss.png);
} ul#navigation li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDaU-5o_6urUW4KazVdhVyqy0dx602nepv9ChSyFY70T42iGiBMv5LGm4q16rm75b6UjcNcdtfA22ODuTl5xHooqKqyQyP0J3FmraLEXYGc0KUtCxHhwlRWcZcRieC0t7PlFODbMD7Kac/s1600/link.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDyS93icnlEHRalBPfBe4h38lQ9PHNBUMtGFbAJIYghnMcMl__l0QYHA48fjoFEB4-jyacC_2e0gX_pVGl9DJ4nzrHrvKl3xwPhcVVLJhMfHeEpm3-vYPlpPQBDqwAvsb_YmmoNtac-uA/s1600/color.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;}
}

Keempat: cari kode </body> dan letakkan kode berikut diatasnya.

<ul id='navigation'>
<li><a href='Alamat Url'>Home</a></li>
<li><a href='Alamat Url'>About Me</a></li>
<li><a href='Alamat Url'>Contact</a></li>
<li><a href='Alamat Url'>Rss Feed</a></li>
<li><a href='Alamat Url'>Link Exchange</a></li>
<li><a href='Alamat Url'>Color Tools</a></li>
</ul>

Ganti tulisan yang berwarna biru dengan alamat URL yang sesuai dengan perintah Menunya.

Setelah selesai, silahkan Simpan Template anda dan lihat perubahannya pada blog sobat. Semoga bermanfaat dan mohon maaf jika ada kesalahan. (Jkt/2012)