<nav class="clearfix">
  <a href="#" id="pull">Меню</a>
  <ul class="clearfix">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Уроки</a></li>
    <li><a href="#">Иконки</a></li>
    <li><a href="#">Дизайн</a></li>
    <li><a href="#">Web 2.0</a></li>
    <li><a href="#">Инструменты</a></li>  
  </ul>
  
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

nav ul {
    display: none;
    height: auto;
  }

nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
  }
nav li {
    display: block;
    float: none;
    width: 100%;
  }
  nav li a {
    border-bottom: 1px solid #576979;
  }

$(function() {
      var pull    = $('#pull');
        menu    = $('nav ul');
        menuHeight  = menu.height();

      $(pull).on('click', function(e) {
        e.preventDefault();
        menu.toggle();
        ($(this).text()=="Меню")?$(this).text("Закрыть"):$(this).text('Меню');
      });

      $(window).resize(function(){
            var w = $(window).width();
            if(w > 320 && menu.is(':hidden')) {
              menu.removeAttr('style');
            }
        });
    });