Creating a simple dropdown menu with JQuery and CSS

Question

I am having trouble creating a dropdown menu using jquery / css.

Right now every dropdown menu for each category is a div that has a hidden display until a category is hovered. I am trying to make jquery show/ hide the correct divs on hover and mouseleave.

The logic I am using is: show the drop down menu if either the category link or the dropdown menu is hovered, and hide the dropdown menu otherwise.

More specifically, the problem I am running into is the dropdown displays as soon as the user hovers over the category link... it closes as soon as the dropdown div isn't hovered. I need it to close if the dropdown isnt hovered or if the category link isnt hovered...

Right now the first dropdown stays open even if I hover over a neighboring category trying to see the neighboring dropdown menu's category, unless I hover over the this dropdown div first.

In addition, the dropdown menu for each div drops down first when the user hovers over a category and AGAIN when a user hovers over the drop down div, which makes it look buggy.

I know this can be achieved with a lot less code:) Please keep in mind that I am very new to JQuery. Also please keep in mind that I would like to keep the DIV setup for the dropdown menus and I am not using Lists.

Here is my JQuery code:

<script type="text/javascript">
    $(document).ready(function(){
        $("#productsLink").hover(function(){
            $("#productsMenu").slideDown();
        });
        $("#productsLink, #productsMenu").hover(function(){
            $("#productsLink").css("color","red");
        });
        $("#productsMenu").mouseleave(function(){
            $("#productsLink").css('color', 'white');
            $("#productsMenu").slideUp();
        });
        $("#aboutLink").hover(function(){
            $("#aboutMenu").slideDown();
            $(this).css("color","red");
        });
        $("#aboutMenu").hover(function(){
            $("#aboutMenu").hide();
        });
        $("#aboutMenu").hover(function(){
            $("#aboutLink").css('color', 'red');
        });
        $("#aboutMenu").mouseleave(function(){
            $("#aboutLink").css('color', 'white');
        });
    });
    </script>

Brian Hough · Accepted Answer · 2012-03-31 17:06:12Z

1

This issue is less about your JS and more about markup. The easiest way to solve this issue, is to wrap both your menu item and your drop down for each item in a single div, and trigger your hover events on that particular div.

<div id="nav-item1">
        <a id="nav-link1">nav item</a>
        <div id="dropdown1">Some Stuff</div>
</div>

This way as long as something in the nav-item1 div is hovered over (the link or the menu) it will stay visible.

There are ways to do it with jQuery, but this is a simple fix that will use a lot less code. Keep in mind every one of those events is separate. That is why you are getting the strange behavior with double animation. Hover over the link triggers one of your events, hover over the menu triggers the second event. You might be able to stop that with some if statements, but don't make it harder on yourself than it needs to be.

answered Mar 31, 2012 at 17:06

Brian Hough

5732 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CSoverIT Over a year ago

Sorry, I am using a template so I cannot do this, links are automatically generated. Is there a way to fix this using JQuery only?

CSoverIT Over a year ago

No because it is several different documents, I am using a template. It is very simple. There are 4 category links in the menu, each having a corresponding drop down box, that drops down on hover of the link.

Collectives™ on Stack Overflow

Creating a simple dropdown menu with JQuery and CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related