How can i disable jquery toggle effect when the screen size changes?

Question

I am creating a simple responsive nav with a toggle effect. However if the nav has been toggled, it will now show when the screen is re-sized greater than the specified value.

if($(window).width() <= 768 ){

$('.mobile-nav-button').on("tap", function(){

    $('nav ul').toggle() ;

});
 }

Answer 1

There are a couple of things you'll need to consider when creating a collapsible responsive menu.

1. Accessibility. You want to make sure that when your navigation is hidden, that it is still accessible for screen readers.
2. Efficient Resize Handler. In most browsers, the resize event is called continuously during resize, rather than once at the end of the resize.
3. Resetting Menu Visibility on Resize. You need to make sure that if the menu is collapsed then the screen is resized above the breakpoint where your toggle is hidden, that the navigation is programmatically made visible.

jsfiddle demo

var resizeTimer;
$(window).on('resize', function (e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function () {
        if ($(window).width() > 768) {
            $('.nav-menu').show();
        } else {
            $('.nav-menu').hide();
        }
    }, 250);
});



$('.mobile-nav-button').on('click', function () {
    $('.nav-menu').toggle();
});

body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    margin:0;
}
nav {
    background-color: #ccc;
    position: relative;
    min-height: 3em;
}
.mobile-nav-button {
    width: 30px;
    float:right;
    margin: 10px;
    cursor: pointer;
    background: transparent;
    outline: none;
    border: none;
}
.nav-toggle, .nav-toggle:after, .nav-toggle:before {
    content:'';
    width: 2em;
    border-bottom: 3px solid black;
    margin: 5px 0;
    display: block;
}
.nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.nav-menu {
    width: 100%;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    position: absolute;
    top: 2em;
    background-color: #eee;
}
.nav-menu>li {
    position: relative;
    display: block;
}
.nav-menu>li>a {
    color: #555;
    line-height: 20px;
    position: relative;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}
@media (min-width: 768px) {
    .mobile-nav-button {
        display:none;
    }
    .nav-menu {
        float: left;
        margin: 0;
        position: relative;
        top: 0;
        background-color: transparent;
    }
    .nav-menu>li {
        float: left;
    }
    .nav-menu>li>a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
    <button class="mobile-nav-button">
        <span class="nav-toggle-label">Toggle site navigation</span>
        <span class="nav-toggle"></span>
    </button>
    <ul class="nav-menu">
        <li>
            <a href="index.html">home</a>
        </li>
        <li>
            <a href="about.html">about</a>
        </li>
        <li>
            <a href="gallery.html">gallery</a>
        </li>
        <li>
            <a href="menu.html">menu</a>
        </li>
        <li>
            <a href="http://bunsandbuns.com/press/">press</a>
        </li>
        <li>
            <a href="hours_&_location.html">hours &amp; location</a>
        </li>
        <li>
            <a href="contact.html">contact</a>
        </li>
    </ul>
</nav>

For accessibility, there are a few key improvements to your markup and css:

• Make the toggle element a <button> or add role="button" and tabindex="0" to the div element. If using a button element, you'll need to add some css to remove the default styling. For more about using the aria role, see: Using the button role.
• Wrap the toggle button inside of the <nav> tags as it is part of your navigation.
• Add an aural landmark that describes what the toggle button does. There are lots of css techniques for this. I added <span class="nav-toggle-label">Toggle site navigation</span> to your markup. The nav-toggle-label class visibly hides the text, but screenreaders will still see it and read it out loud.

The click handler (which will register as a tap event on mobile devices), is straightforward. You don't need to check for the viewport size in this handler since the media query only shows the toggle button on screens that are smaller than 768px.

You do, however, need to deal with the resize though to ensure the visibility of the menu is reset in case the screen is made larger than 768px while the menu is in the collapsed state. For that, you can use a timer to make sure that you only call the check for the window width once the resize is complete. There are better debounce techniques for this, but the timer method is effective, easy to read and concise. Most people don't go around resizing their windows a lot, so it's not worth a whole lot of extra code in my opinion.

Finally, and this is important, don't forget that you need to include a viewport meta-tag in your page <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

If you don't include the viewport tag, the media query that shows and hide the toggle will not be invoked on most mobile devices since nearly all mobile browsers define their default css viewport width as 980px.

Answer 2

OK I assume that you want to hide the nav when the window is less than 768...

here is the code that works for me. Paste it in a html file. Launch it in a browser. When you resize the window the Nav adapts.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
    $(document).ready(function(){

      //function to show if window > 768 and hide if less
      var displayNav = function(){
        var width= $(window).width();
        if(width<768){
          $(".nav").hide(500);
        }else{
          console.log($('.nav'));
          $(".nav").show(500);
        };
      }


      //Set initial state
      displayNav();
      //subscribe to resize event
      $(window).on('resize',function(evt){

        //set navigation state on every resize new
        displayNav();
      });
    });

  </script>
  <style type="text/css">
    .nav{
      border:1px solid red;
      width:100px;
      height:100px;
      background-color:red;
      text-align:center;
      color:white;
      float:right;
      margin:10px;
    }
  </style>
</head>
<body>
  <div class="nav">
  NAV
  </div>
</body>
</html>