=========  HTML  ==============
<nav>
    <a href="#" class="menu-trigger">Menu</a>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Products</a></li>
    </ul>
</nav>

==========  CSS  ==================

body {
  background-color: #F8ECC2;
  font-family: Arial, sans-serif;
}

nav {
  width: 100%;
  background-color:#65A8A6;
}

nav ul li {
  display:inline-block;
}

nav a {
  color:#F8ECC2;
  display:block;
  text-decoration: none;
  padding:20px 30px;
 }

nav a:hover {
  background: #E65540;
}

.menu-trigger {
  display:none;
  color:#F8ECC2;
}

@media screen and (max-width:500px) {
  .menu-trigger {
    display:block;
  }
  nav ul li {
    display:block;
    border-top:1px #79896D solid;
  }
  nav ul {
    display:none;
  }
}

============  JS  =================

$(document).ready(function() {
  $('.menu-trigger').click(function() {
    $('nav ul').slideToggle(500);
  });//end slide toggle

  $(window).resize(function() {
		if (  $(window).width() > 500 ) {
			$('nav ul').removeAttr('style');
		 }
	});//end resize
});//end ready