Floating Menu dengan Sentuhan jQuery

Written by RA_Syihan on Saturday, December 18, 2010 | Category: , ,

i
255 Votes

Satu lagi trik yang akan saya berikan kepada sobat-sobat Blogger, Blogger Indonesia maupun Blogger Mancanegara yaitu Floating Menu dengan Sentuhan jQuery. Okay dah, sekarang saya akan menjelaskan dan memberikan cara-cara membuat Float Menu Melayang.
Demonya bisa sobat lihat pada Blog Saya ini, pada pojok kanan atas.
Keren kan? terlihat Elegant kalau menurut saya. hhaha ...
Sebenarnya trik ini berkaitan juga dengan posting Cara Membuat Menu Melayang yang dulu. Atau sama saja dengan Membuat Float Box dengan Efek Opacity. Hanya saja postingan ini adalah gabungan antara keduanya, meskipun agak beda-beda dikit kodenya. hhha..
ya langsung sajalah, ini dia ...
jreeng ... jrenngg ..

  1. Seperti biasa, Login dulu ke Blogger sobat
  2. Pilih Rancangan
  3. Lalu Pilih tambah Gadget > Pilih tamabah HTML/Javascript
  4. lalu masukan kode berikut 
    <style type="text/css">
    #hitsukeFX{
    position:fixed;
    top:20px;
    z-index:+1000;
    }
    .hitsukeFXtab{
     height:100px;
     width:55px; float:left;
     cursor:pointer;
     background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijzvmpPAfHh3FGTieyUsIcmlE4JlAzHw9UK6Sjf2TUchFq1pzOG_i7RLVOkMbbuv-JRg3dHNwk4-D-OlaimugNm_MndEk-Auo_f5P0hhebe4zc5SQYUPuqFrcg3rKhs8xC0_n4ngyWqfGH/') no-repeat;
     }
    .hitsukeFXcontent{ float:left;
    border:2px solid tranparent;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    background: #000000;
    padding:2px;
    opacity:0.4;-moz-opacity:0.4;filter:alpha(opacity=40);
    }
    .hitsukeFXcontent:hover {
    opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);}

    </style> <script type="text/javascript">
    function showHidehitsukeFX(){
    var hitsukeFX = document.getElementById("hitsukeFX");
     var w = hitsukeFX.offsetWidth;
     hitsukeFX.opened ? movehitsukeFX(0, 30-w) : movehitsukeFX(20-w, 0);
     hitsukeFX.opened = !hitsukeFX.opened;
     }
    function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }
    </script>
    <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div>
     <div class="hitsukeFXcontent"> 
    Kode Widget/konten kamu disini
    <div style="text-align:right">
     <a href="javascript:showHidehitsukeFX()"> [close!] </a>
     </div>
     </div>
     </div>
     <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>
  5. Lalu klik Simpan
  6. Jadi deh menu melayang sobat ,...
Catatan: Kode yang berwarna merah bisa sobat rubah dengan sesuka hati asal jangan terlalu berlebih.

ya mungkin itu saja yang bisa saya posting tentang Float Menu ini..
Jika ada hal yang kurang jelas saya rekomendasikan untuk bertanya melalui kotak komentar atau pada chatbox blog ini.
terima kasih sobat ....

Share Artikel ini ke teman-temanmu

Lihat Artikel Lainnya disini