CODEWITHSUNDEEP
javascriptjqueryresponsive-design
benspencer
benspencer

Reputation: 111

Responsive JavaScript drop down menu problems

Based on this tutorial over at Webdesigntuts+, I am implementing a responsive JavaScript menu which supports sub menus / drop downs.

Unfortunately, until the orientation of the device is changed, or the browser width is altered, the sub menu / drop down system doesn't work.

Here's the JavaScript / jQuery code:

var ww = $(window).width();

$(document).ready(function() {

adjustMenu();

$(".nav li a").each(function() {
    if ($(this).next().length > 0) {
        $(this).addClass("parent");
    };
})

$(".toggle-menu").click(function(e) {
    e.preventDefault();
    $(this).toggleClass("active");
    $(".nav").toggle();
});

});

$(window).bind('resize orientationchange', function() {
    ww = $(window).width();
    adjustMenu();
});

var adjustMenu = function() {
    if (ww <= 480) {
        $(".toggle-menu").css("display", "inline-block");
        if (!$(".toggle-menu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li").unbind('mouseenter mouseleave');
        $(".nav li a.parent").unbind('click').bind('click', function(e) {
            // must be attached to anchor element to prevent bubbling
            e.preventDefault();
            $(this).parent("li").toggleClass("hover");
        });
    } 
    else if (ww > 480) {
        $(".toggle-menu").css("display", "none");
        $(".nav").show();
        $(".nav li").removeClass("hover");
        $(".nav li a").unbind('click');
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
            // must be attached to li so that mouseleave is not triggered when hover over submenu
            $(this).toggleClass('hover');
        });
    }
}

Here is some sample HTML: 

 <a class="toggle-menu" href="#"><img src="/images/responsive/menu.png" alt="Menu"></a>
    <ul class="nav">
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About Us</a></li>
        <li><a href="/url/">Menu item</a>
            <ul>
                <li><a href="/url/">Menu item intro</a></li>
                <li><a href="/url/sub1/">Submenu item 1</a></li>
                <li><a href="/url/sub2/">Submenu item 2</a></li>
                <li><a href="/url/sub3/">Submenu item 3</a></li>
            </ul>
        </li>
    </ul>

The navigation menu is hidden to begin with until the .toggle-menu link is clicked on. Also, the sub navigation is hidden until the parent link is clicked on.

Could anyone with more experience of jQuery / JavaScript suggest any potential solutions please?

Many thanks!

Upvotes: 0

Views: 1528

Answers (1)

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14737

As a kind of general rule (and based off experience), it's kind of wonky to process any evaluations of dimension (width, height, etc) on document.ready, because there's a very real chance that your page layout isn't even laid out yet, so the values of width and height on your elements may not have been evaluated yet.

Could you try putting the adjustMenu() call to, say, $(window).load() instead of $(document).ready()?

Also, probably better to move the var ww = $(window).width() call into the adjustMenu() function itself.

edit

var adjustMenu = function () {
        var ww = $window.width();
        // the rest of your adjustMenu function
    },
    $window = $(window).bind('resize orientationchange load', adjustMenu)
    ;

$(document).ready(function () {
    // your original document ready handler
    // EXCEPT for the adjustMenu() call
});

Upvotes: 1

Related Questions