CODEWITHSUNDEEP
jqueryhtmldrop-down-menuhyperlink
Carl Papworth
Carl Papworth

Reputation: 1322

Links not working in drop-down menu

I'm using using a dropdown menu for a magento-website, when the width is below 1024px. The drop down works fine, however when the menu is shown (By the .fadeToggle(); method) The links wont work, instead it hides the ul, as if I had pressed the link again. As far as I can see, the button that triggers the effect ( #nav li.level0 a) doesn't cover the links in the drop-down menu. So I can't see why it acts like I am clicking it. Can't find anything weird with the css either.

Tried it in a jsfiddle, and here it works, so maybe it is css related?

JS-fiddle: http://jsfiddle.net/bpVZ9/

Here's a link to the website: http://shop.veivecouture.com/

HTML:

<ul id="nav" class="default">

    <li class="level0 parent">
<a href="http://shop.veivecouture.com/collections.html">
            <span>Collections <em>+</em></span>
    </a>
        <ul class="level1" style="top: 83px; display none">
            <li class="level1">
                <a href="http://shop.veivecouture.com/collections/tensione-superficiale.html" class=""><span>Head</span></a>
            </li>
        </ul>   
    </li>
</ul>

CSS:

.header-sidebar .box-scroll .nav-container #nav{
width: 100%;
padding: 0px;
}

.header-sidebar .box-scroll .nav-container #nav a{
padding: 0px;
}

.header-sidebar .box-scroll .nav-container #nav span{
padding-left: 20px;
}

.header-sidebar .box-scroll .nav-container #nav li.level0{
width: 45%;
max-width: 45%;
border-bottom: solid 1px #ddd; 
}

.header-sidebar .box-scroll .nav-container #nav span.plus{
right: -10px;
}

.header-sidebar .box-scroll .nav-container #nav ul.level1 {
width: 100%;
top: 100px;
width: 100%;
max-width: 100%;
top: 0px;
margin-left: 0px;
display: block;
pointer-events: none;
}

.header-sidebar .box-scroll .nav-container #nav ul.level1 li{
width: 100%;
top: 100px;
width: 100%;
max-width: 100%;
top: 36px;
left: 0px;
margin-left: 0px;
pointer-events: none;
}

.header-sidebar .box-scroll .nav-container #nav ul.level1 li a{
pointer-events: auto;
}

.header-sidebar .box-scroll .nav-container #nav li:first-child{
margin-right: 2%;
}

Here's my JS:

if (jQuery(window).width() < 1024) {
            $('#nav li.parent ul li.level1').hide();
        $('#nav li.level0 a').click(function(e){ return false;});
        $('#nav li.level0 a').click(function(e){
            e.preventDefault(); 
            e.stopPropagation();
                $(this).parent('li').find('ul li.level1').stop().fadeToggle(500);
                    $('#nav li.level0 a').not(this).parent('li').find('.level1:visible').hide();
        });
        }

Upvotes: 0

Views: 1053

Answers (2)

Carl Papworth
Carl Papworth

Reputation: 1322

Ok so the problem was that it was targeting all the <a>s within the li.level0, even those within li.level1, so therefore I had to put in an exclusion (.not('ul li.level1 a')in the JS as such:

    if (jQuery(window).width() < 1024) {
        jQuery('#nav li.parent ul li.level1').hide();
        jQuery('#nav li.parent a').not('ul li.level1 a').click(function(e){
                e.preventDefault();
                jQuery(this).find('span.plus').toggleClass('opened');
    jQuery('#nav li.level0 a').not(this).parent('li').find('.level1:visible').hide();
                jQuery(this).parent('li').find('ul li.level1').stop().fadeToggle(500);
        });
    }

Upvotes: 0

Catalin Deaconescu
Catalin Deaconescu

Reputation: 443

You need to stop the propagation of the click event up to the level1 ul. (you have them nested and when you click the link the action goes up to the parent elements and it also triggers the "hide the menu" action)

This code should do the trick, if I managed to get your HTML structure right. 

if (jQuery(window).width() < 1024) {
     jQuery('#nav .level1 a').click(function(event) {
            event.stopPropagation();
     });
}

Please check it out as it's hard for me to test it out atm, or provide a Jsfiddle if it's not working so we can tinker with the code

Upvotes: 1

Related Questions