Float Div Left Side Bar Using Mootools

Float Div Left Side Bar Using Mootools Web-development (jquery) Float Div Left Side Bar Using Mootools Float Div Left Side Bar using mootools

Download
Download Here

<script type="text/javascript" src="mootools-core-1.3.2-full-compat.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
$('show1').addEvent('click', function(){
new Fx.Tween('cont').start('width', 361);
new Fx.Tween('show1').start('left', 316);
new Fx.Tween('hide1').start('left', 316);
new Fx.Tween('clickr').start('left', 0);
new Fx.Tween('floatdiv').start('width', 361);
$('show1').setStyle("visibility","hidden");
$('hide1').setStyle("visibility","visible");
});
$('hide1').addEvent('click', function(){ 
new Fx.Tween('cont').start('width', 39);
new Fx.Tween('show1').start('left', 0);
new Fx.Tween('hide1').start('left', 0);
new Fx.Tween('clickr').start('left', -400);
new Fx.Tween('floatdiv').start('width', 33);
$('show1').setStyle("visibility","visible");
$('hide1').setStyle("visibility","hidden");
});
})
</script>
<style type="text/css">
#cont { height:465px; width:361px; margin-left:0px; color:#FFF; background-image:url(gethiredgetwiredpromo.png); background-position:right; background-repeat:no-repeat; position:relative; }
#show1 { cursor:pointer; width:28px; height:163px; visibility:hidden; position:absolute; left:316px; margin-top:251px; margin-left:0; background:url(show_03.png); }
#hide1 { cursor:pointer; width:28px; height:163px; visibility:visible; position:absolute; left:316px; margin-top:251px; margin-left:0; background:url(hide_03.png); }
#clickr { position:absolute; width:315px; height:436px; margin-top:10px; }
</style>
<div>
<div>
 <a href="http://r-ednalan.blogspot.com/"><div></div></a>
 <div></div>
<div></div>
</div>
</div>
<script type="text/javascript">
floatingMenu.add('floatdiv',
{
 targetLeft: 0,
 targetTop: 0,
 snap: true
});
</script>

Posted by Hodie J