Cara Buat JQuery Floating Menu

Kalau diposting sebelumya sudah kita sajikan floating menu berbeban entheng, untuk posting kali ini kita akan coba buat yang sedikit lebih kompleks. JQuery Floating Menu masih memanfaatkan jQuery.1.3.2.js dengan pertimbangan supaya tidak terlalu banyak jenis javascript harus kita tempatkan di blog karena tentu saja akan membuat blog semakin bertambah berat. Untuk membangun menu ini selain jQuery kita masih menambahkan sedikit CSS dan javascript pendukung. Seperti biasanya, KODE CSS diletakkan di atas KODE ]]><b/:skin> sedang jQuery.1.3.2.js diletakkan di bawah KODE </head>.

Cari juga KODE </body>, kemudian letakkan javascript pendukung tepat di atasnya.

Oke..., sebelum mencobanya kamu boleh melihat hasil yang telah jadi dengan membuka di DEMO. Jangan lupa setelah semua KODE CSS, jQuery dan javascript ditempatkan dengan teliti di template, silahkan simpan kode dan script tersebut dengan KLIK Simpan Template. Sekali lagi sebelum semua dimulai jangan lupa untuk mengamankan template terlebih dahulu (backup template) dengan cara

D E M O

KODE CSS JQuery Floating Menu

<style type="text/css">
#bgsGR_JQmenu{
    border-top:40px solid #797878;
    border-left:6px double #999999;
    border-right:6px double #999999;
    border-bottom:20px ridge #999999;
    border-radius-topright:10px;-moz-border-radius-topright:10px;
    -webkit-border-radius-topright:10px;-goog-ms-border-radius-topright:10px;
    border-radius-bottomright:10px;-moz-border-radius-bottomright:10px;
    -webkit-border-radius-bottomright:10px;-goog-ms-border-radius-bottomright:10px;    
    overflow:auto; 
    position:absolute; 
    margin-top:150px; 
    left:5px; 
    width:250px; 
    height:325px; 
    background: url(http://i29.tinypic.com/21ndqav/gubhugreyot/images/bg_bgsGR-FJQmenu.jpg) top repeat-x; 
    text-align:center; 
    color:#fff; 
    font-size:18px;
    }
#bgsGR_JQmenu ul {
    list-style:none;
    } 
#bgsGR_JQmenu li { 
    font-size:12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:normal;
    color: #0000FF;
    text-align:left;
    }
#bgsGR_JQmenu li a {
    color:#FFFF66; 
    text-decoration:none;
    padding-left:20px;
    background:url(http://i49.tinypic.com/xbepm1/gubhugreyot/images/bgMenuAnima.gif) left no-repeat;
    background-position:0 5px;
    }
#bgsGR_JQmenu li a:hover { 
    color:#00FF00; 
    text-decoration:none;
    background:url(http://i27.tinypic.com/10qffux/gubhugreyot/images/MiniLoader.gif) left no-repeat;
    background-position:0 0;
    } 
</style>

Copy paste link jQuery.1.3.2.js di bawah ini dan letakkan di bawah KODE <head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Letakkan javascript di bawah ini tepat di atas KODE </body>

<script type="text/javascript">
//<![[CDATA[
$.fn.bgsGR_JQmenuFloater = function(options) {var opts = $.extend({ startFrom: 0, offsetY: 0, attach: '', duration: 50 }, options);var $obj = this;$obj.css({ position: 'absolute' });var parentBottomPoint = $obj.parent().offset().top + $obj.parent().height();$(window).scroll(function () { $obj.stop();var isAnimated = true;var objTop= $obj.offset().top;var objBottomPoint = objTop + $obj.outerHeight();if ( ( $(document).scrollTop() > opts.startFrom || (objTop - $(document).scrollTop()) > opts.startFrom ) && ( $obj.outerHeight() < $(window).height() ) ){var adjust;( $(document).scrollTop() < opts.startFrom ) ? adjust = opts.offsetY : adjust = -opts.startFrom + opts.offsetY;$obj.animate({ top: ($(document).scrollTop() + adjust ) }, opts.duration, function(){ isAnimated = false } );} else {$obj.stop();}});};$('#bgsGR_JQmenu').bgsGR_JQmenuFloater({duration: 700, opacity: 1, offsetY: 10, startFrom:0});
//]]>
</script>

Gunakan xHTML berikut sebagai dasar penyusunan menu di bagian body.

Simpan melalui widget atau Tambah Gadget di Elemen Laman.

<div id="bgsGR_JQmenu"><h3>bgsGR_JQmenu</h3>
 <ul>
  <li><a href="Link_bgsGR_JQmenu-1">JQmenu-1</a></li>
  <li><a href="Link_bgsGR_JQmenu-2">JQmenu-2</a></li>
  <li><a href="Link_bgsGR_JQmenu-3">JQmenu-3</a></li>
  <li><a href="Link_bgsGR_JQmenu-4">JQmenu-4</a></li>
  <li><a href="Link_bgsGR_JQmenu-5">JQmenu-5</a></li>
  <li><a href="Link_bgsGR_JQmenu-6">JQmenu-6</a></li>
  <li><a href="Link_bgsGR_JQmenu-7">JQmenu-7</a></li>
  <li><a href="Link_bgsGR_JQmenu-8">JQmenu-8</a></li>
 </ul>
</div>

Keterangan/Catatan :

Apabila kode CSS disimpan di atas kode ]]></b:skin> , hilangkan kode (tag)
<style type="text/css"> dan tag penutupnya :
</style>
Apabila mengalami kesulitan dalam pemasangan dan penyimpanan kode dengan cara di atas, gunakan cara seperti ini :
- Login ke blogger
- Dasbor : KLIK Layout/Tata Letak atau Design/Rancangan.
- KLIK Add Gadget (Tambah Gadget).
- KLIK HTML/Javascript.
- Copy-Paste Semua Kode Secara berurutan dan pastekan di box widget yang tersedia : JQuery, Javascript Pendukung, Kode CSS dan xHTML.
- KLIK SAVE Settings/Simpan.
- Setelah berhasil, silahkan jQuery bisa di pindah di bawah kode <head>
- Bila sampeyan sudah menggunakan JQuery-1.3.2.js atau JQuery-1.3.2.min.js, hapus saja JQuery yang aku sertakan di sini.
- Sampeyan juga bisa pindahkan kode CSS di atas kode ]]></b:skin> (hilangkan tag pembuka dan penutup style).
Untuk menyesuaikan dengan kolom yang tersedia di halaman blog, lebar (width) dan tinggi (height) pada KODE CSS bisa di rubah.
Link_Menu-1 s/d Link_Menu-8 merupakan URL dari menu yang ditampilkan. Ganti link-nya dan nama menunya untuk disesuaikan dengan link dan nama menu milik sampeyan.

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

� Happy Blogging - gubhugreyot �

Cara Buat JQuery Floating Menu

0 Response to "Cara Buat JQuery Floating Menu"

Labels

Entri Populer

Info Blog

About Me