jika tertarik copy kode berikut :
Letak kan di atas
]]></b:skin>ul#navigation { position:fixed; margin:0px; padding:0px; top:-10px; right:10px; list-style:none; z-index:999999; width:980px; font:normal 16px Electrolize,Sans-Serif bold; -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: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.6);
color: rgba(0, 0, 0, 0.6); background-repeat:no-repeat; background-position:50% 150px; border:4px solid #333333; -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:#333333; 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:#E8E8E8; 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 #333333 transparent; } ul#navigation li:nth-child(1) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI7hjLw57f3ayCjAaEWhk3IO8P1hccspBWQTlUf_tETkIkbqvTU66uKQRiPZ5FqKpdZd3xP_ANCAGuYvy7ce0Q8f8xJDKheaDiM6Lb_QEcShtTxKzWyQHRB62QuGcinMGBNI4BJLxnWBY/s1600/home.png); }
ul#navigation li:nth-child(2) a { background-image:url(http://media.merchantcircle.com/37078913/skull_thumb.png); } ul#navigation li:nth-child(3) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhooHKh2Ug1OP2TM_ofdrv8ZV1VzgY1t4jgGnoM6ppNgPXBJDpLcWr-vyIfmuzqt1gxh0QZQ4zk1r4oEYRJeMn1PEu3v_8VdtPfATzREf3HpDA3AhgASvLH5ILxoJ01EVkcCGQHKxfc_wU/s1600/rss_feed.png); } ul#navigation li:nth-child(4) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6qk85EXPj2hr0sAl-A_oB3tvvy-dyHJsptF8880xLowVz_ggEIFk_ctS83_8-fVCdtM-Q10KgAUzVIv8ilCVboNDNTzEX-Yml5TjBDdyNNxzl2CvZRe5dEyhBztNbF7B6_1P26Csw3Bc/s1600/email_send.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> copy kode di bawahdan letakan diatas
</body><ul id='navigation'>
<li><a href='URL KALIAN' title='Home'>Home</a></li>
<li><a href='URL KALIAN' title='Portal'>Portal</a></li>
<li><a href='URL KALIAN' target='_blank' title='Google FeedBurner'>Atom Feed</a></li>
<li><a href='URL KALIAN' title='Send Me eMail'>Contact</a></li>
</ul>
Demikian artikel tentang Fly And Slide Out Menu Css3 ini dapat kami sampaikan, semoga artikel atau info tentang Fly And Slide Out Menu Css3 ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
