how do you get a static menu to change into slidy menu in moo tools?

[Rockonmetal]

HEY! haven't been here in a while (remember when i used to post 30 times a day!!!) well, I have a question, and i can't find a moo tools person...

I saw this menu whilst searching for cool multi-level menus online...
http://net.tutsplus.com/tutorials/ja...-using-jquery/

it looks really cool, now I tried it and there is a slight problem... when you try and add content to the right of it or put it in a table, it decides because of the position css thingy, that it has to be that... I have a menu from DD, which I tweaked:
http://www.dynamicdrive.com/style/cs...vertical_menu/
Is it possible via moo tools or jquery to have just the text slide on hovering and what would you edit for that? (I'm still an ubernewb in Js)
thanks upfront!

[jscheuer1]

I'm not sure what you are after, but working with jQuery and the menu you linked to, here's a demo of an effect like that added:

http://home.comcast.net/~jscheuer1/side/hover_h/

[Rockonmetal]

ya that is exactly what i am looking for, the only problem i see, is that when the menu is sliding in, if you hover over the options, they don't return back to where they were before but ya, thats exactly the effect I was looking for! thanks man!

[jscheuer1]

I see what you mean. I believe I've corrected that, clear your cache and refresh the demo before putting it through its paces again to test for glitches. Aside from the (I hope obvious) script changes, I added a class to the last menu item:

<li><a href="http://www.javascriptkit.com" class="last" title="JavaScript">JavaScript</a></li>

to serve as a flag for when the last item has completed the initial animation. Don't worry about the proliferation of possible classes for the links (now at top, selected, and last). The code should perform just fine with multiple classes wherever they may be desired, example:

<li><a href="http://www.javascriptkit.com" class="selected last" title="JavaScript">JavaScript</a></li>

[Rockonmetal]

thanks man! It works like a good menu... *tries to feed it a menu treat...*

[jscheuer1]

Good. Just as a side note on this - I basically wrote the code from scratch, just looking casually at what it did in the link you gave. Then I realized a number of shortcomings, so consulted the code from the demo you linked to. After importing all that was good in it, I saw that it had a problem, if you repeatedly hovered the menu items, some of them could get into a short animation loop. That's why I added the stop() to the first hover function. But, as often happens, correcting one problem makes another. If the stop() was invoked (by a hover of an item or items) before the initializing animation completed, they would get stuck in the state that they were in during the initialization. To prevent that, well that's where the flag comes in, preventing the hover code from activating until all items finish their initialization animation. Hopefully this will not give rise to any other issues.

Writing this gives me an idea for a more efficient means of doing this. I'll get back to you if that pans out.

[jscheuer1]

OK, major rewrite. You no longer need to set position in css on the menucontainer or the menu itself, or height and width of the menucontainer, as these are not required for non-javascript enabled use, and can be set by the script more reliably than just guessing at what the values will be in a given user's browser.

I've moved the hover initialization inside the main initialization and made it conditional upon completion of the intro animation. This is more efficient than the first solution with flags, the .last class is no longer required.