CODEWITHSUNDEEP
javascriptjquerycssmedia-queriesviewport
Patrick
Patrick

Reputation: 820

Toggle ".show" and ".hide" with a condition that always ".show" if browser viewport is at certain width or larger. (Responsive/Mobile Menu)

I have a responsive menu. When the menu reaches tablet/mobile width it turns into a mobile menu. In the menu are 2 special buttons. #toggleReg and #toggleLogin

When the menu dropdown is Open. #toggleReg and #toggleLogin are set to .show but when the menu dropdown is closed they are set to .hide ... simple enough.

But because this is part of a responsive menu. I need #toggleReg and #toggleLogin to always .show if the browser viewports width is above 768px;

How do I add a condition that will solve this problem for me. Since it is currently set to be hidden once reaching a width below 768px; via a media query and then told to display again if the mobile menu is "opened" via the js snippet below.

Here is my current code.

  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
            $('#toggleReg').hide();
            $('#toggleLogin').hide();
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            mainmenu.hide().removeClass('open');
            
          }
          else {
            mainmenu.show().addClass('open');
            $('#toggleReg').show();
            $('#toggleLogin').show();
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

I am working with cssmenumaker source file

Thanks for any help!

Upvotes: 0

Views: 551

Answers (1)

ntgCleaner
ntgCleaner

Reputation: 5985

I think if you just handle the window size before your allow the click, you should be able to make sure the buttons show up. Then if the window is smaller, it will check for the button being pressed.

$.fn.menumaker = function(options) {
    var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
    }, options);

    return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        //Add this clause
        if($(window).width() >= 768){
            $('#toggleReg').show();
            $('#toggleLogin').show();
        } else {
            $(this).find("#menu-button").on('click', function(){
            $('#toggleReg').hide();
            $('#toggleLogin').hide();
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) { 
                mainmenu.hide().removeClass('open');
            } else {
                mainmenu.show().addClass('open');
                $('#toggleReg').show();
                $('#toggleLogin').show();
                if (settings.format === "dropdown") {
                    mainmenu.find('ul').show();
                }
            }
        }
    });
}

This won't work on window resize though - only when the window loads.

UPDATE This is how I would normally write it:

function menuState() {
    var winW = $(window).width();
    if(winW >= 768) {
        //Handle Large Menu
        $('#toggleReg').show();
        $('#toggleLogin').show();
    } else {
        //Handle Mobile Menu
        $('#toggleReg').hide();
        $('#toggleLogin').hide();
        $(document).on('click', '#menu-button', function() {
            var menuClass = $(this).attr('class').split(" ")[1];
            if(menuClass == "menu-opened") {
                $(this).removeClass('menu_opened');
                $(this).next('ul').removeClass('open');
            } else {
                $(this).addClass('menu-opened');
                var mainMenu = $(this).next('ul');
                if(mainMenu.hasClass('open')) {
                    mainMenu.hide().removeClass('open');
                } else {
                    mainMenu.show().addClass('open');
                    $('#toggleReg').show();
                    $('#toggleLogin').show();
                    if (settings.format === "dropdown") {
                        mainmenu.find('ul').show();
                    }
                }
            }
        });
    } 
}
$(document).ready(function(){
    menuState();
});
$(window).resize(function(){
    menuState();
});

You may be able to comment out the function and just plaster this in that javascript file.

Upvotes: 1

Related Questions