I am struggling to initiate the animations when the .menu is clicked on instead of when it's hovered over. What code should I include in my clickeffect function to start the animations onclick?
Unfortunately, the system is not allowing me to post the question so I'm adding some extra text here.
function showmenu(){
var menu = document.getElementById('mobile-menu'), maxH="148px";
if (menu.style.height == maxH){
menu.style.height = "0px";
}else{
menu.style.height = maxH;
}
}
function clickeffect(){
var burgermenu = document.getElementByClassName('menu');
}.menu {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
margin: 25px;
}
.menu span {
margin: 0 auto;
position: relative;
top: 12px;
}
.menu span:before, .menu span:after {
position: absolute;
content: '';
}
.menu span, .menu span:before, .menu span:after {
width: 30px;
height: 6px;
background-color: white;
display: block;
}
.menu span:before {
margin-top: -12px;
}
.menu span:after {
margin-top: 12px;
}
.menu span {
-webkit-transition-duration: 0s; transition-duration: 0s;
-webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.menu:hover span {
background-color: rgba(0,0,0,0.0);
-webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.menu span:before {
-webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform;
-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
-webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
}
.menu:hover span:before {
margin-top: 0;
-webkit-transform: rotate(45deg); transform: rotate(45deg);
-webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;
}
.menu span:after {
-webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform;
-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
-webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
}
.menu:hover span:after {
margin-top: 0;
-webkit-transform: rotate(-45deg); transform: rotate(-45deg);
-webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;<a href="#" id="nav-toggle" class="menu"><span onclick="showmenu('mobile-menu')+clickeffect('nav-toggle')"></span></a>