Due to the popularity of the script.aculo.us version of the Fancy Sliding Menu I decided a Mootools version was now in order.
It looks exactly the same as the the script.aculo.us, it works exactly the same as the script.aculo.us version, the only difference is it runs on Mootools.
Right well thats enough of the introductions, click on the demo and download the code below.
Have a look for yourselves and enjoy.

demo
Feel free to view the Fancy Sliding Menu for Mootools demo.
download
Please download the Fancy Sliding Menu for Mootools code.


14 Comments Received
Thanx for the great MooTools port of this very nice code. I am trying to find a way to have all the menus collapse to their original position on mouseout (preferably with an adjustable delay) rather than always having one open. Obviously when the menu is initialized it is in this state - can you help
Hi there!
i think you need to go to “tabslide.js” and change “var idleTime = 10000;” to a smaller value. too small wont work correctly, i changed to 1000 and it works fine!!
Hi, on mouse over the pane go to up. How can i change to the pane go to down?
thank’s and very cool example
Hi Sebastian
I think we are asking for the same thing - how do you collapse the menu on mouseOut (rather than wait for the duration set in the idleTime variable). I have an instance where I would like to feature a piece of furniture. One menu would have measurements, another samples of finishes etc. so I would like them to stay open as long as the mouse was over them (and collapse immediately on mouseOut)
Cheers
David
hey excellent slide menu!!
is there a way to modify the code such that this works as drop down too… i mean changing the direction in which this opens, and moving the panel body and container div’s to the top??
thnx
Yogesh
I would also like to know how to make it drop down. Fabulous menu man.
thanks
tj
love your look…we have a problem when people enter site the menu stays open for a few secs, its annoying, can you help?
mike
I too have to the same problem of the left panel being open when the page loads, and the panels not closing on mouseout.
Any chance of a fix?
Love your work
I fixed the problem of the first panel being open being simply deleting it and adding another. Was in the hmtl/css not the script im assuming?
To stop the first panel being open simply remove the id=”visible” from the h3 tag. That should do it.
To make the menu drop down from the top you need to edit the css for “.panel_container”. Simply remove bottom:0px; and replace with top:0px; and overflow:hidden;
Try that and let me know how it goes. I’ll post up the code on to the site tomo.
I noticed that the question about having the menus drop back into place on mouseout was never answered. Can you tell us how to do this? Thanks!
Hi Andy,
I love the script. There is only one thing I haven’t managed to figure out …
Is it possible to de-activate the rollup effect in one or more panels?
The first panel is home, and i really don’t have any subcategory there, the same with the last one, contact
Pingback & Trackback
Leave A Reply