Cara Membuat Menu Melayang Dengan Slider Menggunakan CSS3

Menu Melayang CSS3 M emasang menu dengan tampilan fly dan slide out menu dengan css3, efek dari menu ini sangat cantik, selain menunya slide...

Menu Melayang CSS3

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.

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/AVvXsEiw2W8kmpmdyBq4m0JuvtWoMC67fGYTHFCm1EFVYMHpQyOYEPryy1ppHY1WZj86CKt04k8MSNUq0a0ukac8KbgX_E-VGUmcpT_NJumKRZNcew7ctgBaJT3Yeij5BATpuGA3F7jrOkssZoM/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvLJMKHmLiZOfMtqT1vn4Yo_isC7gMXCn79Yxi-u4mehvA7u_iO-hgDZnOV_GNKQkir49a3Y8oKoiGfAjduYd-rvywEnUSno8h_Tj07YMvzMSgC_q-tHnfXYyZTf78Zr9xPmWyu7TaW3E/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmM3gTCa4dQZRMDDHbS8Uh1lHkZGw4n5i9SXbcRoP871G3p5BR5jeOrFk5gpHdtw7hZaRVEwIQw8C4BSpSNxo42CFaXT0pawd5aGpNY-uhFzvjYBgHyN0DL1xJ1JPx7aR1OtjlbPMtjkM/s1600/mail.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFjYetcMLqszXBpH-IfGACYqMoYx5ZgqKUmXK3wtW3pxijitKNdRnJ2Xrhep5ke3gRC_t26x5XR8zeiRyf7X-J_CbcSIC-Z6R-ZU4RGDQ3Bko-uD_f5hsEHOePgplj-pSRz4meFi3kdXQ/s1600/rss.png);
} ul#navigation li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVN3KoPrXMI4m5w_0RxgHdROTNKZZ1Rs4kXf0oQ363O2qD1VnzZPi64Hafp4pB3YVAIafEC9tbAvV76tw5E20R10jskLGFEIcOM0PUafXvkn1v7n0S0Xs6_PStq3A2r-MMVDDeYLZD0Ro/s1600/link.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXs0-v_0-C7aICKo6vseynR1QZw6ky5EwyuexaqmBWC6sXOXEYaYT4MzLX905c2NRlEZVdfBl0j2yrWqIUey3TIji4uNmSGQyVVTanBN49d_nmterarAWTALOH0clEakmW4LafEFYnisg/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 dan letakan 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.

kalian 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 Ini. Original Article By SituSeo

Demo Sample Slide Menu