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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KMZEDvgbbmNeb_UBvorcHHCCF_nTND_sroPn9gNbDv9LTijBEWeH5Q4Ydvnm4cvWkkyvTK6WKZMyocJNrWe2562OBChuL63wS1hd6YwetZyYuGCO9sKTKc0ixQgJp0DLliuRCMVkT4c/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/AVvXsEgfneuMoXB-gnLIlzdk_J8rM_KiimOS3sFsFdtDaKzX-lX-TUKvH1QJzBbIAwlunfIzpidKFomEg43yB0XQhnonlf7xVmzQLXTeo4dsJ8Ph5y6xoS5IxhxHVvqxp8R0yy1jI2haASae9tM/s1600/rss_feed.png); } ul#navigation li:nth-child(4) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7p122dg__mHuQxQP-12E0hPi5g_wkXFRj5-6cVTsx8ya8BiQZk9NVmeKkc41Gt6HLqya6dFqKcuflqMixHtHYWbrdEuY8s_o3r6Y-7waLpzfwan2QjFUxYePiMLYA1XCiYqSwllbjYe8/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>