halp halp - 4 months ago 18
Javascript Question

Menu Toggle on click

I want to toggle the .menu div on click. This is how far I've gotten and I'm puzzled as to why the javascript isn't working at all. Already tried out so much.

Help is much appreciated.

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

I see you forgot to add jQuery reference. Add this and It'll start working -

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