Results 1 to 5 of 5

Thread: Multi level drop up menu on hover

  1. #1
    Join Date
    Jul 2011
    Posts
    29
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Multi level drop up menu on hover

    Hello Everyone.

    I am working on a dropup menu that animates from bottom to top on mouse hover.

    This is the script for it.

    Code:
    $(function() {
        $('.menu > li ').hover(
            function () {
                var $this = $(this);
                $('a',$this).stop(true,true).animate({
                        'bottom':'0px'
                    }, 600);
                $('i',$this).stop(true,true).animate({
                        'top':'-10px'
                    }, 700);
            },
    		
            function () {
                var $this = $(this);
                $('a',$this).stop(true,true).animate({
                        'bottom':'-300px'
                    }, -1);
                $('i',$this).stop(true,true).animate({
                        'top':'50px'
                    }, 700);
            }
        );
    });

    This script drops up the menu.

    I am trying to integrate the dyamic drive menu which is http://www.dynamicdrive.com/dynamici...menu/demo2.htm inside the drop up menu.

    What happens is that when i hover the mouse on the drop up menu, the menu drop ups with the ddlevelsmenu, but when I hover on say CSS library and when I take my mouse to the items inside css library, my drop up menu closes.

    What I want is that when I hover to any level from the ddlevelsmenu, my drop up menu should not close untill i mouse out entirely from all the items inside it.

    Awaiting Solutions.

    Regards,
    Harley

  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

    The meaning of hover in jQuery is mouseenter/mouseleave which are like mouseover/mouseout but that make sure that the related target, the one the mouse is moving to, isn't a child of the one being moused out of. That often throws off these type of scripts. So, as long as your nested menu is actually nested within the markup of your outer menu, it should work.

    Oh, but I see you are using li tags as does the menu you are nesting, that could be a problem.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

  3. #3
    Join Date
    Jul 2011
    Posts
    29
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    The meaning of hover in jQuery is mouseenter/mouseleave which are like mouseover/mouseout but that make sure that the related target, the one the mouse is moving to, isn't a child of the one being moused out of. That often throws off these type of scripts. So, as long as your nested menu is actually nested within the markup of your outer menu, it should work.

    Oh, but I see you are using li tags as does the menu you are nesting, that could be a problem.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    Hello Sir,

    Thank you for the reply.
    I am attaching the .zip file that consists of the relevant files.
    Attachment 4690

    I hope this helps.

    Regards,
    Harley.

  4. #4
    Join Date
    Jul 2011
    Posts
    29
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Is there no one who can give me a solution for the above problem??

  5. #5
    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

    One way would be to put all of the content inside the triggers. For that you would need a different secondary menu.

    Perhaps:

    http://www.dynamicdrive.com/style/cs...side_bar_menu/
    Last edited by jscheuer1; 08-21-2012 at 02:43 PM.
    - 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
  •