Maret 10, 2012

Fly And Slide Out Menu Css3

Situseo Blog : 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.

Css3 Menu Fly and Slide Out

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(http://3.bp.blogspot.com/-8WwZdGaZDF8/T1jCmIXy3YI/AAAAAAAAAgs/6YHfBmBXNcM/s1600/home.png); 
} 
ul#navigation li:nth-child(2) a { 
background-image:url(http://3.bp.blogspot.com/-WAE3b9EAwjE/T1jCtyoXeEI/AAAAAAAAAhM/APrL1imssvg/s1600/user.png); 
} 
ul#navigation li:nth-child(3) a { 
background-image:url(http://3.bp.blogspot.com/-VlnL4tXuqac/T1jCqlPtZvI/AAAAAAAAAg8/-612pNRV4t8/s1600/mail.png); 
} 
ul#navigation li:nth-child(4) a { 
background-image:url(http://3.bp.blogspot.com/-NNr72SAv55E/T1jCsQaAzaI/AAAAAAAAAhE/6HSDKhWqLvI/s1600/rss.png); 
} ul#navigation li:nth-child(5) a { 
background-image:url(http://2.bp.blogspot.com/-l758NNsB7lY/T1jCooeCocI/AAAAAAAAAg0/xtS5Snatt0k/s1600/link.png); 
} 
ul#navigation li:nth-child(6) a { 
background-image:url(http://4.bp.blogspot.com/-FXzMwo3qjvA/T1jCjTFCYdI/AAAAAAAAAgk/1ZjJBvcXz70/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 biru.


Semoga bermanfaat,

19 Diskusi untuk Fly And Slide Out Menu Css3

10 Maret 2012 16.48  

wow.. terimakasih banyak...
Gambar & warnanya juga udah sesuai banget,, nggak perlu ngotak atik lagi dah..hehehe

11 Maret 2012 21.07  

terimakasih sob telah share... sudah ane pasang diblog rizkyaddict-artcolection[dot]blogspot[dot]com
tp ane sbenernya butuh yang berbentuk vertikal.. soalnya kl di atas akan menutupi menu di template ane.. :( dikepinggirkan jadi aneh kl di tampilkan di beda jenis ukuran monitor (wide/kotak)

14 Maret 2012 18.15  

jadi nambah ilmu, maksih telah berbagi, salam

14 Maret 2012 21.40  

blenger mas blajar Html, tpi tetap semangat ya.... artikelnya semuanya menarik, i like this blog....

18 Maret 2012 23.56  

@abang janutmemang mblenger, tapi suka hehehe...keep blogging

19 Maret 2012 00.03  

@Faril Lukmansiip kalau cocok warna dan iconnya, jadi tinggal pasang

25 Maret 2012 00.05  

makasih mas dalang,kemarin saya coba yang vertikal,malah amburadul klo dibuka pakai netbook

25 Maret 2012 02.11  

@Irawan Blog sama2, apa pake yang ini masih amburadul?

9 April 2012 11.54  

makasih banyak mas bro, tampilan blog ane kebanyakan trik dari sini, terus kasih trik menarik ya mas....

10 April 2012 19.59  

wow .. matur nuwun sanget niki ...
blog njenengan sae sanget ...
tutorialnya gampang dipelajari ..

like your blog .. ! ^_^

10 April 2012 21.48  

artikelnya bagus bgt kawand, blog ane jdi lebih menarik di buatnya berkat tips tips anda..

22 April 2012 17.51  

cara mengganti warna backgrounnya gimana bos

10 Mei 2012 07.44  

mau nanya nih sob...untuk menengahkan posisi widget seprti punya sobat gimana caranya....kok saya disebelah kanan trus

11 Mei 2012 00.59  

@Metal-xp warna biru

Saya sudah coba pasang di demo blog saya sob. Tapi kalo saya buka blog demo saya pakai firefox, kok menunya malah nda jadi ya.

11 Juli 2012 05.13  

menakjubkan... matur sembah nuwun mas dalang.. bermanfangat sanget mas...

12 Juli 2012 13.40  

gan, di blog saya kok ga bisa ya
malah muncul di sudut kiri bawah
klik-shot[.]blogspot[.]com

26 Oktober 2012 04.40  

mas kalau mau mengganti biar muncul di sebelah kiri dan kalo di scroll tetap ada gmna.?

29 Desember 2013 07.57  

top markotop gan !!

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top