I watched a YouTube tutorial and discussed the code with others before running it through syntax error programs. Despite passing CLLlint and the w3validator, the menu still doesn't function as intended.
$(document).ready(function() {
$('sidebar-btn').click(function() {
$('#sidebar').toggleClass('visible');
});
});body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
}
.sidebar {
background: #33676767;
width: 200px;
height: 100%;
display: block;
position: absolute;
left: -200px;
top: 0;
transition: left 0.3s linear;
}
.sidebar.visible {
left: 0;
transition: left 0.3s linear;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
text-align: center;
}
ul li a {
/* color: white; */
width: 180px;
padding: 10px;
text-decoration: none;
font-size: 18px;
}
.sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 15px;
cursor: pointer;
margin: 20px;
position: absolute;
top: 0;
right: -50px;
}
.sidebar-btn span {
height: 1px;
background: #66CC33;
margin-bottom: 5px;
display: block;
}
.sidebar-btn span:nth-child(2) {
width: 75%;
}
.sidebar-btn span:nth-child(3) {
width: 50%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="sidebar">
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/index.html">Sweet</a></li>
<li><a href="/index.html">Home</a></li>
<li><a href="/index.html">All</a></li>
<li><a href="/index.html">4One</a></li>
</ul>
<div class="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>