SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Drop Down Disappears Too Quickly..

    Hey Folks,

    I have a little problem with a simple jqeury drop down I've added to my site. Basically, I want to drop down to work like any other dropdown, where you will hover over the link and it will display, and when you move your mouse, it disappears again. Right now, the problem is that when I hover, the drop down shows up, but as soon as I leave the link to click on one of the dropdown options, the drop down disappears because it thinks I'm no longer on the element.

    Another option would be to toggle on "Click" event, but once again, I don't know how to remove the menu unless you click back on the element which is annoying, I'd rather have it so if you click anywhere it will untoggle.

    Here is the code I have (The Jquery Portion):

    Code JavaScript:
    $(document).ready(function () {  
     
    $('img.menu_head').hover(function () {  
     
    $('ul.menu_body').slideToggle('fast');  
     
    }); 
    });

    Any Ideas?

    Elementax

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    There's a number of reasons that could be happening, but it would be better if we could see this in action. Can you post a link, or a demo with jsFiddle?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    There's a number of reasons that could be happening, but it would be better if we could see this in action. Can you post a link, or a demo with jsFiddle?
    As ralph said it could be a number of things but to me it sounds like your HTML is not marked up correctly for what your trying to accomplish, if you could supply a link that would be very helpful.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well here is a simplified version to display the issue -->Here<--, as my actual one has imaged that wouldn't be displayed properly. You'll get the idea there if you go to places and try to click on one of the sublinks.

    Here is my html for that part:

    Code HTML4Strict:
        <div id="navigation"> 
     
            <a href="#"><img src="../images/nav1.png" alt="navbar1" /></a>
            <a href="#"><img src="../images/nav2.png" alt="navbar2" class="menu_head" /></a>
            	<ul class="menu_body">
                	<li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 2</a></li>
                    <li><a href="#">Test 3</a></li>
                </ul>
     
        </div>

    and once again, the corresponding JQuery:

    Code JavaScript:
    $(document).ready(function () {  
     
    $('img.menu_head').hover(function () {  
     
    $('ul.menu_body').slideToggle('fast');  
     
    }); 
    });

    Elementax

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your hover event is only binded to your image and NOT the <ul> which is what's causing it to disappear so suddenly, what you need to do is wrap your code in something like an un-orded list so that you can bind an event to an <li> element for instance.

    HTML Code:
    <div id="navigation"> 
        <ul>
            <li><a href="#"><img src="../images/nav1.png" alt="navbar1" /></a></li>
            <li>
                <a href="#"><img src="../images/nav2.png" alt="navbar2" class="menu_head" /></a>
                <ul class="menu_body">
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 2</a></li>
                    <li><a href="#">Test 3</a></li>
                </ul>
            </li>
        </ul>
    </div>
    Code JavaScript:
    $('li', '#navigation').each(function() {
        var self = $(this);
     
        if (self.has('ul')) {
            self.on({
                mouseenter : function() {
                    $(this).find('ul').slideDown('fast');
                },
                mouseleave : function() {
                    $(this).find('ul').slideUp('fast');
                }
            });
        }
    });

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That didn't seem to work. Could it be that there is nothing in the Jquery referencing menu_head? I only want the drop down to go down if the user hovers over navbar2.png with the class of menu_head

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Also, another option would be to click to expand dropdown, and when you click anywhere else other than the dropdown it closes. Right now, all I can get is when you click it toggles, but it stays open, the only way you can close it is by clicking on the element again.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Elementax View Post
    Also, another option would be to click to expand dropdown, and when you click anywhere else other than the dropdown it closes. Right now, all I can get is when you click it toggles, but it stays open, the only way you can close it is by clicking on the element again.
    Well how about putting in a small delay before it is closed, such as a 1/4 of a second? That would give enough time to scroll over to it, to where it registers that you're on it and stays open.

    Code javascript:
    $('.menu_body').hide();
    $('li', '#navigation').each(function() {
        var self = $(this);
     
        if (self.has('ul')) {
            self.on({
                mouseenter : function() {
                    $(self).find('ul').slideDown('fast');
                },
                mouseleave : function() {
                    setTimeout(function () {
                        $(self).find('ul').slideUp('fast');
                    }, 250);
                }
            });
        }
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Well how about putting in a small delay before it is closed, such as a 1/4 of a second? That would give enough time to scroll over to it, to where it registers that you're on it and stays open.

    Code javascript:
    $('.menu_body').hide();
    $('li', '#navigation').each(function() {
        var self = $(this);
     
        if (self.has('ul')) {
            self.on({
                mouseenter : function() {
                    $(self).find('ul').slideDown('fast');
                },
                mouseleave : function() {
                    setTimeout(function () {
                        $(self).find('ul').slideUp('fast');
                    }, 250);
                }
            });
        }
    });
    That seems to work out Thanks a lot

    Elementax


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
  •