Fixed Bottom Menu Using Easing Jquery !

Pagi hari ini jam 9 pagi saya mau share tentang easing plugin jquery yg bisa diterapkan pada fixed menu satu ini..

untuk lebih jelas nya bagai mana menu itu dapat dilihat di demo ini,

Demo

giamana sob ?? langsung ajah dah cara buatnya..

1. Masukan script jquery ini,


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>


2. Masukan juga script plugin easing jquery ini,

<script src='http://granoblog.googlecode.com/files/easing.js' type='text/javascript'></script>


Nb: hostingin ndiri yah klo mo pake ?

3. ini css nya..

#fake-body {
overflow:auto;
z-index:1;
}
#dock {
background:#ccc url(http://i33.tinypic.com/2gwe1si.jpg) repeat-x;
height:400px;
z-index:100;
width:100%;
}
.dockblock {
float: left;
width:250px;
padding:0 4px 20px 4px;
margin: 30px 4px 0px 4px;


4. ini javascriptnya bro..


<script>


$(document).ready(function() {


var easing_type = 'easeOutBounce';
var default_dock_height = '40';
var expanded_dock_height = $('#dock').height();
var body_height = $(window).height() - default_dock_height;


$('#fake-body').height(body_height);
$('#dock').css({'height': default_dock_height, 'position':'fixed', 'top': body_height});
$(window).resize(function () {

updated_height = $(window).height() - default_dock_height;

$('#fake-body').height(updated_height);
$('#dock').css({'top': updated_height});
});

$('#dock').mouseover(function () {

expanded_height = $(window).height() - expanded_dock_height;

$(this).animate({'height':expanded_dock_height,'top': expanded_height},{queue:false, duration:1000, easing: easing_type});

}).mouseout(function () {

body_height = $(window).height() - default_dock_height;


$(this).animate({'height':default_dock_height,'top': body_height},{queue:false, duration:10 00, easing: easing_type});

});

});

</script>

Nb: untuk easeOutBounce bisa di ganti sesuai selera, untuk list plugin easing dapta dilihat sendiri disini, http://gsgd.co.uk/sandbox/jquery/easing/


5.HTML-nya


<div id='fake-body'>
<br/><br/>
</div>

<div id='dock'>


<b:section class='dockblock' id='dockblock1' showaddelement='yes'/>
<b:section class='dockblock' id='dockblock2' showaddelement='yes'/>
<b:section class='dockblock' id='dockblock3' showaddelement='yes'/>

</div>


Nb: untuk isi dari menunya saya buat jadi 3 buah widget . itu bisa diganti sesuai selera temen2, mau di isi 1 buah widget atau yang lainya..

Nah postingan kali ini berakhir wkwwkwkwk, liat jam eh masih jam 9:26 . posting nya ga lama yak..