Cara Membuat jQuery Transparent Floating Menu

Jquery Transparent floating Menu ini sudah di coba di template BlogSPOT dan hasilnya teramat memuaskan. Jika sampeyan ingin melihatnya silahkan KLIK link DEMO di bawah ini.

D E M O

Pada prinsipnya, jQuery Transparent Floating Menu bekerja mengandalkan JQuery-1.3.2.js. JQuery ini digunakan dengan pertimbangan kemampuannya yang luar biasa sehingga pemanfaatannya tidak hanya dapat dipergunakan untuk sebuah fungsi (desain) tunggal saja. Seandainya sampeyan sebelumnya sudah menggunakan jQuery-1.3.2.js atau JQuery-1.3.2min.js, maka hanya tinggal menambahkan sedikit kode CSS dan javascript saja.

Floating menu dibuat dalam bentuk transparan sehingga beberapa teks yang nantinya tertindih oleh oleh pergerakan floating menu akan tetap akan terlihat dengan baik. Penggunaan efek opacity sama sekali tidak mengganggu atau bahkan merusak penampilannya karena kita menambahkan juga efek opacity pada hover sehingga ketika cursor menyentuh salah satu titik box menu, maka seluruh bagian Transparent Floating Menu akan terlihat dengan amat sempurna. Untuk semakin memperindah bentuk dan penampilan, kita juga menambahkan sebuah background image serta background arrow (panah) pada link menu serta efek rounded corners di sebelah kiri box. Pada bagian sebelah kanan yang bersinggungan di garis tepi blog kita buat tanpa border sehingga terlihat seakan melekat ujung kanan blog.

Cara Membuat JQuery Transparent Floating Menu

Kode CSS JQuery Transparent Floating Menu

<style type="text/css">
#floatMenu {
    position:absolute;
    overflow:auto; 
    top:180px;
    left:55%;
    margin-left:240px;
    width:200px;
    height:300px;
    border:4px solid #B87F4B;border-right:none;
    background:url(http://s3.tinypic.com/335e5xx/gubhugreyot/images/bgBoxMenu.jpg) no-repeat;
    border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    padding:10px 4px;
    opacity:0.1;
    -moz-opacity:0.1;
    filter:alpha(opacity=10);
    }
#floatMenu:hover {
    opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);
    }
#floatMenu ul {
    margin-bottom:20px;
    }
#floatMenu ul li {
    line-height:14px;
    list-style:none;
    display:block;
    text-decoration:none;
    color:#ccc;
    }
#floatMenu ul li a{
    font-family:Arial Narrow;
    margin-left:0px;
    padding-left:15px;
    font-size:12px;
    color:#fff;
    background:url(http://i44.tinypic.com/95q8fq/gubhugreyot/images/arrow.jpg) left no-repeat;
    background-position:0 3px;
    text-decoration:none;
    }
#floatMenu ul li a:hover{
    color:#38DB29;
    background:url(http://i44.tinypic.com/chrv9/gubhugreyot/images/arrow/anima.gif) left no-repeat;
    background-position:0 3px; 
    }
#floatMenu ul li a:visited{
    color:#F80000;
    } 
</style>

Javascript JQuery Transparent Floating Menu

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'>
</script>
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () { 
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:800,queue:false});
});}); 
</script>

xHTML JQuery Transparent Floating Menu

<div id="floatMenu">
<ul class="menu1">
     <li><a href="Link-1" title="Javascript Menu">Javascript Floating Menu Javascript Floating</a></li>
     <li><a href="Link-2" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-3" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-4" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-5" title="JQuery">JQuery Image Gallery</a></li>
     <li><a href="Link-6" title="Javascript Menu">Javascript Floating Menu</a></li>
     <li><a href="Link-7" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-8" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-9" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-10" title="JQuery">JQuery Image Gallery</a></li>
     <li><a href="Link-11" title="Javascript Menu">Javascript Floating Menu</a></li>
     <li><a href="Link-12" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-13" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-14" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-15" title="JQuery">JQuery Image Gallery</a></li>
     <li><a href="Link-16" title="Javascript Menu">Javascript Floating Menu</a></li>
     <li><a href="Link-17" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-18" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-19" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-20" title="JQuery">JQuery Image Gallery</a></li>
</ul>
</div>

Langkah Pembuatan jQuery Transparent Floating Menu

1. Login to BloGGeR (login ke BloGGeR) : Gunakan dan Tulis User Name (Nama Pengguna) atau Email Address serta Password (Sandi/Kode Rahasia).
2. Dasboard (Dasbor) : Sesaat setelah login maka kita akan melihat halaman Dasbor. KLIK link Layout/Tata Letak atau Design/Rancangan.
3. Layout/Tata Letak (Design/Rancangan) : KLIK Add Gadget (Tambah Gadget).
4. HTML/Javascript : KLIK pada teks atau gambar yang bertuliskan HTML/Javascript.
5. Copy-Paste : Copy dan Paste Seluruh kode CSS, Javascript dan xHTMl di box yang tersedia.
6. SAVE (Simpan) : KLIK SAVE/Simpan, kemudian buka blog (open your blog) untuk melihat hasilnya.

Keterangan/Catatan :

1. Apabila blog telah ada (menggunakan jQuery-1.3.2.js atau jQuery-1.3.2.min.js, maka <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> tidak usah disertakan.
2. Letakkan seluruh kode secara berurutan dari Kode CSS diikuti Javascript, kemudian baru xHTML.
3. Ganti Link-1 s/d Link-20 dengan URL (alamat) setiap menu yang akan ditampilkan.
   
   Contoh : http://gubhugreyot.blogspot.com/2010/07/cara-buat-dan-pasang-ticker-2-kolom.html
4. GAnti Nama Menu dengan menu milik sampeyan sendiri :
   
   Contoh Nama Menu yang harus di ganti : CSS Floating Menu
5. Apabila dikehendaki merubah nilai transparansi menu, silahkan ubah nilai opacity pada syntax

   #floatMenu {
         ....
         ....
         opacity: 0.1;-moz-opacity:0.1;filter:alpha(opacity=10);
         ... dst
         ....
         }

6. Akan lebih baik lagi jika jQuery dan javascript diletakkan (simpan) di atas kode <head>, sedang kode CSS di atas kode ]]></b:skin>. Jika penyimpanan dilakukan seperti langkah tersebut, silahkan hilangkan tag pembuka dan penutup "style" pasda kode CSS yang berupa :
   <style type="text/css"> dan </style>
7. xHTML tetap dalam posisi seperti sebelumnya dengan disimpan melalui penambahan widget di bagian sidebar.
8. Hal seperti di atas berlaku juga saat template blogger baru (new blogger template) digunakan.

Bagi yang menggunakan template blogger baru, silahkan ganti kode CSS-nya dengan kode CSS berikut ini:

<style type="text/css">
#floatMenu {
    position:absolute;
    overflow:auto; 
    top:-100px;
    right:-30px;
    margin-left:240px;
    width:200px;
    height:300px;
    border:4px solid #B87F4B;border-right:none;
    background:url(http://s3.tinypic.com/335e5xx/gubhugreyot/images/bgBoxMenu.jpg) no-repeat;
    border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    padding:10px 4px;
    opacity:0.1;
    -moz-opacity:0.1;
    filter:alpha(opacity=10);
    }
#floatMenu:hover {
    opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);
    }
#floatMenu ul {
    margin-bottom:20px;
    }
#floatMenu ul li {
    line-height:14px;
    list-style:none;
    display:block;
    text-decoration:none;
    color:#ccc;
    }
#floatMenu ul li a{
    font-family:Arial Narrow;
    margin-left:-10px;
    padding-left:20px;
    font-size:12px;
    color:#fff;
    background:url(http://i44.tinypic.com/95q8fq/gubhugreyot/images/arrow.jpg) left no-repeat;
    background-position:0 3px;
    text-decoration:none;
    }
#floatMenu ul li a:hover{
    color:#38DB29;
    background:url(http://i44.tinypic.com/chrv9/gubhugreyot/images/arrow/anima.gif) left no-repeat;
    background-position:0 3px; 
    }
#floatMenu ul li a:visited{
    color:#F80000;
    } 
</style>

Keterangan tambahan

1. Untuk mengatur posisi floating menu terhadap bagian atas (vertical position), rubah nilai pada top: -100px; dengan memperbesar atau memperkecil. Semakin besar nilai minus, maka akan semakin naik.
2. Untuk mengatur posisi terhadap batas sebelah kanan (horizontal position), rubah nilai pada : right: -30px; Semakin besar nilai minus, maka akan semakin ke kanan.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «