Results 1 to 7 of 7

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

  1. #1
    Join Date
    Jan 2007
    Location
    The stage
    Posts
    568
    Thanks
    23
    Thanked 6 Times in 6 Posts

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

    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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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/
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Rockonmetal (02-18-2009)

  4. #3
    Join Date
    Jan 2007
    Location
    The stage
    Posts
    568
    Thanks
    23
    Thanked 6 Times in 6 Posts

    Default

    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!

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    Code:
    <li><a href="http://www.javascriptkit.com" class="selected last" title="JavaScript">JavaScript</a></li>
    Last edited by jscheuer1; 02-19-2009 at 01:42 AM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Rockonmetal (02-19-2009)

  7. #5
    Join Date
    Jan 2007
    Location
    The stage
    Posts
    568
    Thanks
    23
    Thanked 6 Times in 6 Posts

    Default

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

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •