Мобильное меню

<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>

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;

  }

}

$(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