weLcome To Dai-detected

Fly And Slide Out Menu Css3

Bagikan ke Teman! :


Memasang menu dengan tampilan fly dan slide out menu dengan css3.
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(http://4.bp.blogspot.com/-egqqmX6lOow/TyRCvCQ7g1I/AAAAAAAAAbw/_2X4NLieI2A/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(http://1.bp.blogspot.com/-g8K1unyi_Ns/TyRCx1-ZUTI/AAAAAAAAAb4/rqK4XUh9JCQ/s1600/rss_feed.png); } ul#navigation li:nth-child(4) a { background-image:url(http://1.bp.blogspot.com/-ffOe7HHBREg/TyRCr5GexDI/AAAAAAAAAbo/18UIqldT7ws/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 bawah
dan 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>

0 komentar — Skip ke Kotak Komentar

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: : :l: :m: :n: : : :q: :r: :s: :t: :u: :v: :w: : :y: Emotion lainnya?

Posting Komentar — or Kembali ke Postingan