Fly And Slide Out Menu 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: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;}
}

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 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 biru.

Semoga bermanfaat,

smber: situseo.blogspot.com

Pos ini dipublikasikan di blog tutorial, menu navigasi. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s