Membuat Menu Vertikal Bergulir
17.34 // 0 komentar // macho // Category: Tutorial Blog //
Bagi blog anda yang ingin mempunyai menu vertikal bergulir, ini adalah ide yang baik untuk di pasang di sidebar, dengan menu ini, Anda dapat menambahkan link lebih banyak dari yang lain. Minggu lalu, saya datang di ke simplexdesign.blogspot.com situs dan menemukan sebuah artikel untuk membuat menu vertikal bergulir ini. Jadi aku mengambilnya dan menuliskannya disini lagi untuk menerapkan ke Blogger. Aku berharap ini berguna bagi Anda.
Demo: untuk melihat sebuah menu vertikal bergulir, lihat bagian sidebar kiri halaman.
Jika tertarik, ikutin langkah-langkahnya :
Step 1:
- Login ke Blog Anda
- Masuk ke Layout/Tata Letak
- Terus menuju Edit HTML
- Cari code ini ]]></b:skin>
- Copy script code dibawah ini dan letakkan dibawah code ]]></b:skin>
- Taruh script code dibawah ini dan letakkan diatas code ]]></b:skin>
- Kemudian Simpan Template
<script src='http://machrus.googlecode.com/files/jquery-1.js' type='text/javascript'/> <script src='http://machrus.googlecode.com/files/jquery.js' type='text/javascript'/> <script src='http://machrus.googlecode.com/files/jquery_002.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { //Background color, mouseover and mouseout var colorOver = '#CC7A00'; var colorOut = '#1f1f1f'; //Padding, mouseover var padLeft = '20px'; var padRight = '20px'; //Default Padding var defpadLeft = $('#menu li a').css('paddingLeft'); var defpadRight = $('#menu li a').css('paddingRight'); //Animate the LI on mouse over, mouse out $('#menu li').click(function () { //Make LI clickable window.location = $(this).find('a').attr('href'); }).mouseover(function (){ //mouse over LI and look for A element for transition $(this).find('a') .animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } ) .animate( { backgroundColor: colorOver }, { queue:false, duration:200 }); }).mouseout(function () { //mouse oout LI and look for A element and discard the mouse over transition $(this).find('a') .animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } ) .animate( { backgroundColor: colorOut }, { queue:false, duration:200 }); }); //Scroll the menu on mouse move above the #sidebar layer $('#sidebar').mousemove(function(e) { //Sidebar Offset, Top value var s_top = parseInt($('#sidebar').offset().top); //Sidebar Offset, Bottom value var s_bottom = parseInt($('#sidebar').height() + s_top); //Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs var mheight = parseInt($('#menu li').height() * $('#menu li').length); //I used this coordinate and offset values for debuggin $('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); $('#debugging_status').html(Math.round(((s_top - e.pageY)/100) * mheight / 2)); //Calculate the top value //This equation is not the perfect, but it 's very close var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2); //Animate the #menu by chaging the top value $('#menu').animate({top: top_value}, { queue:false, duration:500}); }); }); </script>
/*MENU VERTIKAL BERGULIR*/ body {padding:0; margin:0 20px;} #sidebar {height:300px; overflow:hidden; position:relative;} #menu {width:100%; list-style:none; padding:0; margin:0; top:0; position:relative; height:100%; width:100%;} #menu li {padding:11px 0; text-align:left; display:block; cursor:hand; cursor:pointer;} #menu li a {background:url() repeat #1f1f1f; color:#ddd; font-family:helvetica, arial, verdana; font-size:10px; font-weight:900; display:inline; padding:20px 8px 5px 20px; text-decoration:none;} #menu li span {font-family:georgia, arial; font-size:10px; color:#464646;}
Step 2 :
- klik Page Element/ Elemen Laman tab
- klik Add a Page Element/ Tambah Gadget
- klik Javascript/HTML
- Copy dan paste code di bawah ini:
- Kemudian Simpan
- Lihat hasil.
Selamat mencoba…
Related posts :
0 komentar for this post
Leave a reply
Photoshop
- 2008 - 2009 Tutorial Macho. designed by Simplex Design.