Having some trouble creating a sliding menu with jQuery. Errors on lines 5 and 6 saying functions are not defined. Can anyone help me figure out what's wrong with my code?
jQuery(function($) {
"use strict";
$(document).ready(function () {
$nav_list = $('#nav_list');
$menuLeft = $('.pushmenu-left');
$nav_list.click(function () {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
});
Here's the HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DogHouse</title>
<script type="text/javascript" src="PushMenuJS.js"></script>
<link href="PushMenuCSS.css" rel="stylesheet" type="text/css">
</head>
<body class="pushmenu-push">
<nav class="pushmenu pushmenu-left">
<h3>Menu</h3>
</nav>
<div class="container">
<div class="main">
<section class="buttonset">
<div id="nav_list">Menu</div>
<!-- End Content -->
</div>
<!-- End Main -->
</div>
<!-- End Container -->
</body>
</html>
And here's the CSS:
.pushmenu a {
display: block;
}
.pushmenu-left {
left: -240px;
}
.pushmenu-left.pushmenu-open {
left: 0;
}
.pushmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.pushmenu-push-toright {
left: 240px;
}
.pushmenu, .pushmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
nav-list.active {
background-position: -33px top;
}
Sorry for the long post. Any help would be appreciated!
Thank you.