CODEWITHSUNDEEP
jqueryhtmlcss
miauhaus
miauhaus

Reputation: 13

Javascript responsive-collapsing navbar. Problems when resizing

I have created a navbar with the classic icons ≣ for open and X for close. All is fine stretching smaller the browser window; after clicking/closing and enlarging again, the ≣ icon remains there until refresh page. Sorry for my poor english and thanks in advance.

JS code

var $navbar = $('.js-navbar');
var $toggleMenu = $('.js-toggle-menu'); 

$toggleMenu.click(function () {
if ($toggleMenu.hasClass("active")) {
     $navbar.slideUp("fast");
     $toggleMenu.toggleClass("active");


     $('.toggle-active').hide();
     $('.toggle-menu').show();
 } else {
     $navbar.slideDown("fast");
     $toggleMenu.toggleClass("active");
     $('.toggle-active').show();
     $('.toggle-menu').hide();
 }
 });

 $(window).resize(function () {
 if (window.innerWidth > 760) {
     $navbar.attr("style", "");
     $toggleMenu.removeClass("active");
 }
 });

Jsfiddle https://jsfiddle.net/miauhaus/jdpo1b6r/

Upvotes: 1

Views: 217

Answers (2)

thednp
thednp

Reputation: 4479

For performance reasons and to avoid event bubbling, I would do a delay of about 200ms for the resize handle function, something like this

$(window).resize(function () {
    setTimeout(function() {
        if (window.innerWidth > 760) {
            //do the dew
        }
    }, 200);
});

Upvotes: 1

BuddhistBeast
BuddhistBeast

Reputation: 2670

It appears that on resizing the window, you are not hiding the button. Let me add in two lines that will help out:

 $(window).resize(function () {
 if (window.innerWidth > 760) {
     $navbar.attr("style", "");
     $toggleMenu.removeClass("active");
     $('.toggle-menu').hide(); //hide the button if it is too big
 }
 else{
 $('.toggle-menu').show(); // Show the button if the screen is small enough
 }
});

All I have done is added the ability to hide the button when the screen is bigger than the mobile size via:

     $('.toggle-menu').hide(); //hide the button if it is too big

And then we can show it if the screen is small enough via:

$('.toggle-menu').show(); // Show the button if the screen is small enough

JSFIDDLE

Upvotes: 1

Related Questions