Fancy Apple-Style Icon Slide Out Navigation

Fancy Apple-Style Icon Slide Out Navigation adalah suatu navigasi yang bergaya apple.. agak beda sih.. navigasi ini letaknya di atas bentuknya biasa sih tapi saat disentuh mouse baru kelihatan ajibnya navigasi ini..hehehe navigasi ini saya temukan sudah terdampar di suatu website, ya udah saya pungut aja..oke langsung saja kita lihat demo dan cara pembuatannya

[DEMO]

Langsung ke proses pembuatannya

Loggin blogger.com >>Rancangan >> Edit Html
cari kode ]]></b:skin> dan pastekan kode berikut diatasnya

.navigation{
position:relative;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#7E7E7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Do2TXaenZSx5l8SoIjAkeI3pLJCYsDZiBc10tKGbEhzzeCd7OD8HkvNlMiCjV0If92IW5N14YfMcGLfCLdQEROqylU6-BYovIhGn-Y23BaA87MJCFiCQQQJPTc_kiIpuvIsTKvFNv8sS/s1600/bgMenu.png) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
text-shadow: 0 1px 1px #fff;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor:pointer;
}
ul.menu li span.ipod{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_g83fyRPkI2NmC-jPDxTiUVdwgSz8mG8FVozbXzLIh-ajpHZFeuF8eNcIedThtOIqQcB6ouM1MVbbyhBCg5XI0_PbNl_q0rEvJmJ6eY-yG8x7mkZCeEvd5iXrovsPYFk-WdKQC_AdSP7Q/s1600/ipod.png);
left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPX5AFWNckyvtrrOR6wetdF5Nj-bQ1HaK5VcZOgAcftJSzRmmPYyjFHWvi7piaeJ_LvKfc-6SuScmzVooaUhuc82DmEAhJB29_DgJzo28ApJVUIxsbQ-Hn3-sDqafaLULiF6xiq76zpwRa/s1600/video_camera.png);
left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqscskiqFpB9ztE51mkshxsFM7sraJcdDUb0B6y4BbaMC-fMwv1JmB0xWy9HEf4pbjWMqzEcIX8u6igEarFJgVUWW9o3s2sNd_Ess5WM2g753f7-t6uZXnO2SIjew9VDmR6zYWM75tMM9e/s1600/television.png);
left:293px;
}
ul.menu li span.monitor{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBKj18l3X3-JdXuuYOSg5nO04RoWaQHrMaD93SAFciq0-SLqmJVj8uA8ELfVvXuBhtOrUr4qCaoxIXRUOiAlyS1NsBe3nqTeIzB72PSIuRhTVpPqs40yXnvtpq7QOe-eSzz4QC-O0tj_na/s1600/monitor.png);
left:423px;
}
ul.menu li span.toolbox{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjfEeC-9z0n6BADAodT692HWZSTySF9t_wWnqZ6MN2f8WA68ApdusPEIUaM7YDOKMhFM4Tfbvq6mnD0VAKg3f4VSs6UmPsj_ydJtEquRUxzrBuqUEBHgUtviOiH_s7zCzqmWlpYsGOjBz2/s1600/toolbox.png);
left:553px;
}
ul.menu li span.telephone{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK-L8Qt2XGFyx3S1W-alGE9r_WHymiu8__eLLM9O-UOkhjXTLZ6UuwFzb6yaTSG3KngY7Xz-ABfExIcOrmjJKQqOFviuC6B3nk0E_RO_-t_bIWpYv5tzWOtu66kAmsixkvYw3eYycgTXFE/s1600/telephone.png);
left:683px;
}
ul.menu li span.print{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8n4CXbBqnV-nDwcPB428yDJ8GsZbb5LJgNGCj_VCt4XHfUymzKdQ0itRGO7mn1MNivJGe9zipNWv9Q-mTpb7eeDSbttm-GkUIyK4UhK3YEjudgaLeGooRG1E8UqxGvJgDVt-sjH3oNiA3/s1600/print.png);
left:813px;
}

oke lanjut cari kode </head> dan pastekan kode berikut diatasnya

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://pandet.googlecode.com/files/menu.js"></script>

warning: jika blog anda sudah memiliki kode berwarna merah, jangan anda tambahkan.. cukup satu

lanjut cari kode <body>
dan pastekan kode berikut di bawahnya

<div class="navigation"><ul class="menu" id="menu"><li><span class="ipod"></span><a href="" class="first">Players</a></li>
<li><span class="video_camera"></span><a href="">Cameras</a></li>
<li><span class="television"></span><a href="">TVs</a></li>
<li><span class="monitor"></span><a href="">Screens</a></li>
<li><span class="toolbox"></span><a href="">Tools</a></li>
<li><span class="telephone"></span><a href="">Phones</a></li>
<li><span class="print"></span><a href="" class="last">Printers</a></li>
</ul></div>