Меню Toggle on click

Question

Я хочу переключить .menu div на клик. Это как далеко я получил, и я озадачен тем, почему javascript не работает вообще. Уже пробовал так много.

Помощь очень ценится.

http://codepen.io/su1ts/pen/bZLwZN

HTML:

<header>  
    <button class="headerButton"> 
     <ul class="hamburger"> 
      <li></li> 
      <li></li> 
      <li></li> 
    </ul> 
    </button> 
</header> 

<div class="menu">a</div> 

CSS:

header 
    :width 100% 
    :height 56px 
    :color #FFF 
    :position fixed 
    :font-size 20px 
    :z-index 9999 
    button.headerButton 
     :width 24px 
     :height 24px 
     :text-indent -30000px 
     :overflow hidden 
     :border none 
     :outline none 
     :cursor pointer 
     :position absolute 
     ul.hamburger 
      :margin-top 4px 
      :padding 0 
      li 
       :height 3px 
       :width 12px 
       :background blue 
       :list-style none 
       :margin auto 
       :margin-bottom 2px 
       :opacity 1 
       :border-radius 1px 
       :transition (.25s ease-in-out) 

.menu 
    :width 100% 
    :height 100% 
    :background-color rgba(10,10,10,0.95) 
    :color white 
    :position fixed 
    :display none 
    :z-index 14 

JS:

$(document).ready(function() { 

    $('button.headerButton').click(function() { 
    $('.menu').toggle(); 
    }); 

}); 

Answer 1

Я вижу, что вы забыли добавить ссылку jQuery. Добавьте это и он начнет работать -

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>