CODEWITHSUNDEEP
javascriptjqueryhtml
lumos
lumos

Reputation: 753

jQuery issue with responsive mobile menu

I am using this Responsive Mobile Menu for my site now I want to show/hide only when user click to bellow image area. Currently menu will hide if user click to any link and that I don't want.

enter image description here

My JS Code:

function responsiveMobileMenu() {   
    $('.rmm').each(function() {
        $(this).children('ul').addClass('rmm-main-list');   // mark main menu list
        var $style = $(this).attr('data-menu-style');   // get menu style
        if ( typeof $style == 'undefined' ||  $style == false )
        {
            $(this).addClass('graphite'); // set graphite style if style is not defined
        }
        else {
            $(this).addClass($style);
        }
        /*  width of menu list (non-toggled) */
        var $width = 0;
        $(this).find('ul li').each(function() {
            $width += $(this).outerWidth();
        });
        // if modern browser
        if ($.support.leadingWhitespace) {
            $(this).css('max-width' , 1934+'px');
        }
        // 
        else {
            $(this).css('width' , 1934+'px');
        }
    });
}
function getMobileMenu() {
    /*  build toggled dropdown menu list */
    $('.rmm').each(function() { 
        var menutitle = $(this).attr("data-menu-title");
        if ( menutitle == "" ) {
            menutitle = "Menu";
        }
        else if ( menutitle == undefined ) {
            menutitle = "Menu";
        }
        var $menulist = $(this).children('.rmm-main-list').html();
        var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div>";
        $(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");
    });
}

function adaptMenu() {

    /*  toggle menu on resize */

    $('.rmm').each(function() {
        var $width = $(this).css('max-width');
        $width = $width.replace('px', ''); 
        if ( $(this).parent().width() < $width*1.05 ) {
            $(this).children('.rmm-main-list').hide(0);
            $(this).children('.rmm-toggled').show(0);
        }
        else {
            $(this).children('.rmm-main-list').show(0);
            $(this).children('.rmm-toggled').hide(0);
        }
    });

}

$(function() {

    responsiveMobileMenu();
    getMobileMenu();
    adaptMenu();

    /* slide down mobile menu on click */

    $('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
        if ( $(this).is(".rmm-closed")) {
            $(this).find('ul').stop().show(300);
            $(this).removeClass("rmm-closed");
        }
        else {
            $(this).find('ul').stop().hide(300);
            $(this).addClass("rmm-closed");
        }
    }); 

});
/*  hide mobile menu on resize */
$(window).resize(function() {
    adaptMenu();
});

My JSFiddle: Sample

Any idea or suggestion?

Upvotes: 1

Views: 1380

Answers (2)

Kasyx
Kasyx

Reputation: 3200

Menu is toggled because events in DOM are propagated in DOM tree. You have to call event.stopPropagation() function, to prevent this behaviour.

You have to add simple line of code:

$('.rmm li').click( function( e) {
   e.stopPropagation();
});

Here is updated fiddle: http://jsfiddle.net/PPA6j/1/

Im also suggesting add some class to your li elements, for example do-not-hide, then it should looks like:

$('.rmm li.do-not-hide').click( function( e) {
    e.stopPropagation();
});

Upvotes: 1

Quioz
Quioz

Reputation: 11

You should use stopPropagation():

Similar question: Hide/Toggle submenu when clicking on another menu item

Upvotes: 0

Related Questions