show hide nav button on window resize

by lovromar

HTML

<div id="wrap">
    
    <header>
      <button></button>
      <nav>

        <ul>
          <li><a href="">One</a></li>
          <li><a href="">Two</a></li>
          <li><a href="">Three</a></li>
          <li><a href="">Four</a></li>
          
        </ul>
      </nav>  
      
    </header>  
    
  </div><!-- #wrap -->

CSS

*{
      margin:0;
      padding:0;
    }
    header{
      max-width:600px;
      margin:0 auto;
      background:#aaa;
      overflow:auto;
      padding:30px 50px 0 50px;
      border-left:10px solid #fff;
      border-right:10px solid #fff;
    }
    button{
      width:30px;
      height:30px;
      background:red;
      display:none;
      border:none;
    }
    nav{
      margin:10px 0 0 0;
    }
    nav li{
      display:inline;
    }
    nav li a{
      float:left;
      display:inline-block;
      padding:5px;
      background:yellow;
      margin:0 5px 0 0 ;
    }
    nav li a:hover{
      background:#fff;
    }
    
    @media only screen and (max-width:400px){
      
      button{
        display:block;
        
      }
      nav{
        display:none;
      }
      nav li{
        display:block;
      }
      nav li a{
        float:none;
        display:block;
        padding:5px;
        background:yellow;
        margin:0 5px 0 0 ;
      }
      
    }

JavaScript

$(function ()
{
    var $window = $(window),
	$nav = $('nav'),
        $button = $('button');

    $button.on('click', function ()
    {
        $nav.slideToggle();
    });
    
    $window.on('resize', function ()
    {
        if ($window.width() > 400)
        {
            $nav.show();
        }
    });
});