Fancy Sliding Menu for Mootools

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

“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;”

it works well.

but how i’ll get the h3 sliding in front of the panel_body?

Hi Andy

Great piece of code, works like a charm. Is it possible have the menus close on click? I have modified it so that they open on click now instead of mouseover but cannot seem to get a close on click working.

any ideas?

You can solve the mouseout issue by adding:

$(panels[i].getElementsByTagName(’h3′)[0]).addEvent(’mouseout’, resetTabs);

Unfortunately… that also has the side-effect of making anything in the drop down non-clickable.

very good, thanks

Great code!
But… In ie6, the panel container rest out of the bar.

Any solution?

Thanks for all!

Nice looking in IE. Looks quite different in Firefox.

Now I wonder why no one else seems to have this problem?

This looks slick, but was it designed for <= MooTools 1.1? Doesn’t seem to work with the latest version of MooTools.

Awesome script! Loved it.

very nice..

but is there any chance you’ll make a jquery version of it?

tobi.

could you point me in the right direction to modify the javascript in a way that the active menue goes back up after a another menuepoint was hoverd?

to clarify:

when “home” is active and the site being shown, the user hovers over the other menupoints and then hovers back into the text.

now “contact” is visible, but the site he’s on is still “home”. the visible trace got lost..

i removed the slideTime function, so the active menu is still visible.

any help would be greatly appreciated and donated.

tobi.

Thanks for the awsome script

This is an awesome script.
Unfortunately it is working find in IE6, but you see a bit if the content below the H3. I assume it is a CSS thing but can’t seem to find how to fix this.
Any suggestions?

Hi
this is great post it’s help me alot but I have a issue working with mootols and jquery both are awesome and work well but when I use them togather some things are not working.
pls advice
thanks
irfan

hello. it’s a great menu. but…..how can i do to do a menu like this??:
http://allbrand1.webhat.it/italian/grafica_editoriale.php
the background change every time you go in another section.
thanks

this is awesome