Fly And Slide Out Menu Css3

Satu lagi trick yang dipakai diblog ini akan di update sobat kali ini Memasang menu dengan tampilan fly dan slide out menu dengan css3, efek dari menu ini sangat cantik, selain menunya slide out ketika kita mengarahkan mouse ke arah salah satu menu, tampilan menu ini juga menarik karena datangnya berjalan dari arah kanan ke kiri dan berhenti pada jarak yang telah kita tentukan.....

DEMO

Dengan penggunaan efek css menurut saya tidak terlalu memberatkan dalam loading blog, itu alasan saya kenapa menggunakan Fly and Slide Out Menu dalam blog saya, Script asli fly and slide menu ini merupakan buatan saudara Taufik Nurrohman, jika tertarik menggunakan fly and slide menu pada blog, kalian bisa mengcopy script dibawah ini.

Copy paste script css dibawah ini dan letakan diatas kode ]]></b:skin> :

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/AVvXsEiX6N7qC49hLhqjZlVyInxSTTeV96306OnpCcvuqB-cI7KowTMol4DjGS_zdOCGNGqYhsFdHbVRHsREyaB9UBK9TnkGEJ8sNR3tL7FYZQYLUf_4PSF3QopSGg6wOEyGoiX7fLhQz4n5Sos/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqBy5l46Izav8N6cs-uIHSLknPdKJnDgkbGnfkC-VnqViPsmrSlJ0mnbXqrcJetis3Yh2nJTB96ct1Hp192LhqeJagqy-iOc7rYTmQ66WYjtqL4jsgesaMQRqLW3Tdvgln0qu5wzY-9u4/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQa8M7kEtPfvoE1esEFx4OHX_gWhv_wsGgQdQQLJ3KQ0Vax3Ian4pQln1cUcx2eHyMWJtmCS5dTTdfoXy7IR0_JntZjESK8-w-DajopMzjydWWhg2oG-XBNxDmoJqaHFl08i7yT2eRjo/s1600/mail.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimWgWTvCRysw5T7d9xB8Gujs-3ZJTQ68LRJi4-M1ZB5vRrpwp79uYQuENloQE_Q4azaFnUD7d7JjyK9RpfcUcQtVYVNxk_lMLlBMiKmtgfZEaxmWmKe10kswl8jLDYHxVq73Imt3f3xYY/s1600/rss.png);
} ul#navigation li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVny3ngr_opCBg5y2LHrQWkFktDsmfguubRU442vk6DQ29sUe6rd2t9LUWb9jF85juUKw4iiu5MhcGVrIrFqjs6yY7fQ-DutW2S6pR9W3McdDPTT1WZbcgfl2D13SfeRjRP9cI1lodCmc/s1600/link.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MO7UhErPv_J1YxU1_QqkuuFhDkgl_JoQSYLfrXeimLKnw49ok3GCRjjae5XLyhwgvdzp8XxQCs_Xwnj6C7pJi1YWpTcRXK7s1OkprJzjitYIWbE6W-Fp0SqhLvAuJDbMEbTkQ9oPc-0/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;}
}

Selanjutnya cari kode </body> dan letakan kode dibawah ini danletakan 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>

Save template kalian dan menu fly and slide out menggunkan efek css3 sudah terpasang pada blog kalian.
dan Ganti " Alamat Url " dengan alamat link yang ingin dipasangkan

Sobat bisa mengganti background warna menu fly and slide out dengan menyesuaikan warna dasar template blog kalian, dan mengganti icon dengan icon yang menurut kalian cocok, atur posisi dengan merubah angka yang berwarna biru.

Selamat Berkreasi ^_^
Jangan Lupa Follow Blog Kami....

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Metal Xp. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Metal Xp dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Unknown pada tanggal Sabtu, 28 April 2012