CODEWITHSUNDEEP
javascriptjquerywordpressnavigation
Adam Bell
Adam Bell

Reputation: 1045

Javascript issue with click event on dropdown menu

Recently I took over a WordPress site using a theme that has got a lot of limitations. One of which is their navigation menu. If you look at this site (http://chefkevinwarren.com/) you'll see the drop down menu only shows up on click. Not hover or mouseover. Problem really is when you click on one area with a drop down and then click on another button with a drop down, the first drop down does not go away. Only, it seems clicking outside the drop downs do they disappear. Not great by any stretch.

I found the code and switched the click events to mouseover events. Figured that would work, right? It did, but too well. Now the drop downs go away as soon as you leave the main button. This isn't any better, of course.

The code is too long for SO, so I pasted it into PasteBin, if anyone wants to take a peek: http://pastebin.com/S4Xg9FQa

Upvotes: 0

Views: 111

Answers (2)

Rami.Q
Rami.Q

Reputation: 2476

your code is soo complexe for such simple approach. so if you are looking for a simple DropDown Menu, then here is a Demo:

DEMO: (UPDATED) https://jsfiddle.net/9n514f08/2/

JS: (UPDATED)

var animating = false;
$(".TREE .NODE").mouseenter(function(){
    animating = true;
    $(this).find(".NODES").slideDown("fast",function(){
        animating = false;    
    });
});

$(".TREE .NODE").mouseleave(function(){
    animating = true;
    $(this).find(".NODES").slideUp("fast",function(){
        animating = false;    
    });
});

HTML: 

<div class="TREE">
    <div class="NODE">
        <a class="NODE-LINK">ABOUT</a>
        <div class="NODES">
            <div class="NODE">
                <a class="NODE-LINK">MY STORY</a>
            </div>
            <div class="NODE">
                <a class="NODE-LINK">MY STYLE</a>
            </div>
            <div class="NODE">
                <a class="NODE-LINK">MY STYLE X</a>
            </div>
            <div class="NODE">
                <a class="NODE-LINK">MY STYLE Y</a>
            </div>
        </div>
    </div><div class="NODE">
        <a class="NODE-LINK">SERVICE</a>
        <div class="NODES">
            <div class="NODE">
                <a class="NODE-LINK">MY PRICING</a>
            </div>
            <div class="NODE">
                <a class="NODE-LINK">SERVICES</a>
            </div>
        </div>
    </div>
</div>

CSS: 

.TREE{
    background: #3f4c6b;
}

.TREE > .NODE{
    background: #313654;
    display: inline-block;
    border-left: 1px solid #000;
    border-right: 1px solid #3f4c6b;
    position: relative;
}
.TREE > .NODE:FIRST-CHILD{
    border-left: 0px solid #000;
}
.TREE > .NODE:LAST-CHILD{
    border-right: 0px solid #000;
}

.TREE > .NODE:HOVER{
    background: #3f4c6b;
}

.TREE > .NODE a.NODE-LINK{
    display: block;
    padding: 5px 10px 5px 10px;
    font-size: 13px;
    font-weight: bold;
    color: #FFF;
}

.TREE > .NODE .NODES{
    position: absolute;
    left: 0px;
    top: 100%;
    background: #3f4c6b;
    padding: 5px;
    display: none;
}

.TREE > .NODE .NODES .NODE a.NODE-LINK{
    display: block;
    white-space: nowrap;
}

.TREE > .NODE .NODES .NODE:HOVER{
    background: #313654;
}

if you want the DropMenu do show on click, then change

$(".TREE .NODE").mouseenter(function(){
        .....

to this

$(".TREE .NODE").click(function(){
       .....

Upvotes: 1

Troy Thompson
Troy Thompson

Reputation: 371

A possible quick fix would be to edit the JavaScript controlling your menu.

On line 785 of light-dose.js - add ".children(".dropdown-slide").slideUp( throttle);

$( this ).parent().toggleClass( 'open' ).siblings().removeClass( 'open' ).children(".dropdown-slide").slideUp( throttle );

Test that out and see if it works for you.

Upvotes: 0

Related Questions