Okay so this is from mootools... but i can't do one thing...
You'll see on this page - forget design - im sorting out codes....
http://www.spanglishwebs.com/newdesign.php
You'll see it says options at the top left... if u click this does up to get rid of the menu bar. I'd like it to be the other way round... so when the page loads the menu bar isnt there and you have to click on options to bring the bar down.
This is the mootools code for this:
Code:
Fx.Slide = Fx.Base.extend({
initialize: function(el, options){
this.element = $(el).setStyle('margin', 0);
this.wrapper = new Element('div').injectAfter(this.element).setStyle('overflow', 'hidden').adopt(this.element);
this.setOptions({'mode': 'vertical'}, options);
this.now = [];
this.parent(this.options);
},
setNow: function(){
for (var i = 0; i < 2; i++) this.now[i] = this.compute(this.from[i], this.to[i]);
},
vertical: function(){
this.margin = 'top';
this.layout = 'height';
this.offset = this.element.offsetHeight;
return [this.element.getStyle('margin-top').toInt(), this.wrapper.getStyle('height').toInt()];
},
horizontal: function(){
this.margin = 'left';
this.layout = 'width';
this.offset = this.element.offsetWidth;
return [this.element.getStyle('margin-left').toInt(), this.wrapper.getStyle('width').toInt()];
},
slideIn: function(mode){
return this.start(this[mode || this.options.mode](), [0, this.offset]);
},
slideOut: function(mode){
return this.start(this[mode || this.options.mode](), [-this.offset, 0]);
},
hide: function(mode){
this[mode || this.options.mode]();
return this.set([-this.offset, 0]);
},
show: function(mode){
this[mode || this.options.mode]();
return this.set([0, this.offset]);
},
toggle: function(mode){
if (this.wrapper.offsetHeight == 0 || this.wrapper.offsetWidth == 0) return this.slideIn(mode);
else return this.slideOut(mode);
},
increase: function(){
this.element.setStyle('margin-'+this.margin, this.now[0]+this.options.unit);
this.wrapper.setStyle(this.layout, this.now[1]+this.options.unit);
}
});
Im using the toggle part - call by this code:
Code:
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('contenido-slide');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
Any ideas what i need to change to make it the other way around?
Thanks
Rachel
