I am trying to create a hamburger style menu where the icon changes to a cross when clicked. How can I achieve this effect using JavaScript?
Here is the HTML structure:
<ul class="navigation">
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">Meet the team</a></li>
<li class="nav-item"><a href="#">Blog</a></li>
</ul>
<input type="checkbox" id="nav-trigger" class="nav-trigger" onclick="menuChange()" />
<label for="nav-trigger"></label>
And here is the CSS styling:
.navigation {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
list-style: none;
background: #000;
}
.nav-item {
width: 200px;
}
.nav-item a {
display: block;
padding: 1em;
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
color: #999999;
font-size: 1.2em;
text-decoration: none;
transition: color 0.2s, background 0.5s;
}
.nav-item a:hover {
color: #ffffff;
}
.nav-trigger {
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
position: fixed;
left: 15px;
top: 15px;
z-index: 2;
height: 30px;
width: 30px;
cursor: pointer;
background-image: url(../images/Menu.png);
background-size: contain;
}
.nav-trigger + label, .site-wrap {
transition: left 0.2s;
}
.nav-trigger:checked + label {
left: 215px;
}
.nav-trigger:checked ~ .site-wrap {
left: 200px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}