Javascript-форум - Открытие и закрытие одной кнопкой

Здравствуйте.

Помогите пожалуйста, еще плохо разбираюсь в js, как в выдвижном меню сделать открытие и закрытие на текст "Меню". Когда ставлю один класс, то меню открывается и сразу закрывается. Вот код:

<html>
  <head>
    <style type="text/css">
   /* Body */
body {
	width: 750px;
	margin: auto;
}

.block {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 750px;
}


/* Menu */

.menu {
  background: #555 url('images/menu-bg.jpg') repeat left top;
  left: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
}


/* Basic CSS */

.background {
  background-image: url('images/chicago-night.jpg'); 
  height: 100%;
  width: 100%;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

.menu ul {
  border-top: 1px solid #555;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #555;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu li:hover {
  cursor: pointer;
  background-color: #555;
  }

.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 6px;
}

.icon-menu {
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-menu img {
  margin-right: 5px;
}
  </style>
  </head>
  <body>
  
  <div class="icon-menu">
        Menu
      </div>
	  
	  <div class="block">
  
  <div class="background">

    <div class="menu">
      
      <!-- Иконка меню -->
      <div class="icon-close">
        <img src="images/close-btn.png">
      </div>

      <!-- Меню -->
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
	</div>
	</div>
    
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="menu.js"></script>
  </body>
</html>

/* Открытие меню */
var main = function() { //главная функция
    $('.icon-menu').click(function() { //выбираем класс icon-menu и добавляем метод click с функцией, вызываемой при клике
        $('.menu').animate({ //выбираем класс menu и метод animate
            left: '285px' //теперь при клике по иконке, меню, скрытое за левой границей на 285px, изменит свое положение на 0px и станет видимым
        }, 200); //скорость движения меню в мс
        
        $('.block').animate({ //выбираем тег body и метод animate
            left: '285px' //чтобы всё содержимое также сдвигалось вправо при открытии меню, установим ему положение 285px
        }, 200); //скорость движения меню в мс
    });


/* Закрытие меню */
    $('.icon-close').click(function() { //выбираем класс icon-close и метод click
        $('.menu').animate({ //выбираем класс menu и метод animate
            left: '-285px' //при клике на крестик меню вернется назад в свое положение и скроется
        }, 200); //скорость движения меню в мс
        
    $('.block').animate({ //выбираем тег body и метод animate
            left: '0px' //а содержимое страницы снова вернется в положение 0px
        }, 200); //скорость движения меню в мс
    });
};

$(document).ready(main); //как только страница полностью загрузится, будет вызвана функция main, отвечающая за работу меню