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




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>


  • oke.. simpan.. semoga bermanfaat 


Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Unknown, Published at 16.25 and have 18 komentar

18 komentar:

  1. keren gan....!!!
    izin buat nerapinnya... hahhahah

    BalasHapus
  2. maren capek sudah aku
    belajar buat ini gak bsa2
    asem
    dah
    ok
    nice info

    BalasHapus
    Balasan
    1. . . keren banget. kapan^ aq coba ach,, cz kalo coba sekarang lagi gak mendukung. huhh . .

      Hapus
    2. yupp.. trserah mbak aja deh

      Hapus
    3. . . he..86x,, km bosen ya kalo aq comment mulu?!? ocae dech,, aq gak comment lagi dech. huhh . .

      Hapus
    4. nggak mbak... malah saya suka..

      ckckckck

      Hapus
    5. . . tapi kok kesan nya malas gitu. huhh . .

      Hapus
  3. . . ouwwwww,, syukur dech. karna smua blog yg aq ikutin tu kalo bikin postingan baru, selalu aq comment. begitu. jadi bukan hanya jadi pengikut aja, kalo bisa juga ngrespon lh. begitu. he..86x. maav . .

    BalasHapus
    Balasan
    1. mantep tu... untuk mendukung kemajuan blog saya..
      makasih ya

      Hapus
    2. . . so pasti lh. kan sebagai teman baek emank kayak gitu. he..86x . .

      Hapus
    3. oke... nanti akan ada hadiah spesial buat mbak..
      ckckck

      Hapus
    4. . . hadiah apa'n tuch?!? apa aq dikasih tiket umroh?!? he..86x. -{_NgarepAbiz_}- . .

      Hapus
    5. kalo ketemu ane kasih permen karet
      wkwkwk
      kalo ketemu ya

      Hapus
    6. . . jiach,, masa udah gede dikasih permen karet?!? haduch,, pelitnya. he..86x . .

      Hapus