Dazu brauchst du nur deine Slidebar zu stylen wie du sie haben möchtest, mit den zwei Möglichkeiten auf- und zugeklappt. Am besten, wenn sich beide Zustände nur durch eine CSS-Eigenschaft unterscheiden, z.B. width oder left.
Dann kannst du mit ein wenig Javascript diese CSS-Eigenschaft animiert von einem Wert auf den anderen bringen. Mit tween kannst du eine CSS-Eigenschaft animieren und mit morph beliebig viele gleichzeitig. http://mootools.net/docs/core/Fx/Fx.Tween
Mit addEvent setzt du noch das Event, bei dem die Bar aufklappen soll, z.B. 'mouseenter' und 'mouseleave'. http://mootools.net/docs/core/Element/Element.Event
Beispiel: moo_slidebar.xhtml|html5
HTML-Code:
<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', function(){
var
mySlidebar = $$('#header .mod_navigation')[0],
myAnimation = new Fx.Tween(mySlidebar, {
transition: 'bounce:out',
property: 'left'
})
;
mySlidebar.setStyles({
position: 'fixed',
width: 200,
background: '#fff',
left: -180
});
mySlidebar.addEvents({
mouseenter: function(){
myAnimation.start(0);
},
mouseleave: function(){
myAnimation.start(-180);
}
});
});
/* ]]> */
</script>
Lesezeichen