CODEWITHSUNDEEP
jqueryhtmlcss
CSoverIT
CSoverIT

Reputation: 23

Creating a simple dropdown menu with JQuery and CSS

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>

Upvotes: 0

Views: 1259

Answers (1)

Brian Hough
Brian Hough

Reputation: 573

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.

Upvotes: 1

Related Questions