Hodoku
05-05-2007, 07:10 PM
Currently, I have three sub-menus on my page, all of which are defined in the CSS like so (just the numbers differ):
#subMenu1 {
width: 890px;
height: 25px;
background-color: #50e0d4;}
I am also using mootools, specifically the slider module (www.mootools.net).
To make one menu slide in, and the others slide out, I have done this in the HTML:
<a href="#" onclick="getMenu1()">Menu 1!</a>
<script>var Slider1 = new Fx.Slide('subMenu1', {duration: 500});
var Slider2 = new Fx.Slide('subMenu2', {duration: 500});
var Slider3 = new Fx.Slide('subMenu3', {duration: 500});</script>
and this in the .js file:
function getMenu1() {
Slider2.slideOut();
Slider3.slideOut();
setTimeout("Slider1.slideIn()", 600);
return false;
}
I want to cut down on the code, but I dont know how. A friend of mine said to make a generic class and use $$('.mysubmenuclass') to create a generic slider function, but i have NO idea how to do that. Help?
#subMenu1 {
width: 890px;
height: 25px;
background-color: #50e0d4;}
I am also using mootools, specifically the slider module (www.mootools.net).
To make one menu slide in, and the others slide out, I have done this in the HTML:
<a href="#" onclick="getMenu1()">Menu 1!</a>
<script>var Slider1 = new Fx.Slide('subMenu1', {duration: 500});
var Slider2 = new Fx.Slide('subMenu2', {duration: 500});
var Slider3 = new Fx.Slide('subMenu3', {duration: 500});</script>
and this in the .js file:
function getMenu1() {
Slider2.slideOut();
Slider3.slideOut();
setTimeout("Slider1.slideIn()", 600);
return false;
}
I want to cut down on the code, but I dont know how. A friend of mine said to make a generic class and use $$('.mysubmenuclass') to create a generic slider function, but i have NO idea how to do that. Help?