I am working on a navigation menu that has a toggle for the drop-down feature. The default state of the toggle is blue, but when the drop-down menu is activated, it turns red.
The issue I am facing is that when I click on one of the li items in the menu, it does not revert back to its default blue state; instead, it stays red.
My question is: How can I make the menu toggle go back to its default state of blue when an li item is clicked? Additionally, I would like it to rotate and change color back to blue when returning to the default state.
For reference, here is a JSFiddle link: https://jsfiddle.net/61g4std1/9/
Thank you for your assistance!
/*===================
---- Menu Rotate ----
===================*/
$(document).ready(function() {
var rotation = 0;
$('#menutoggle').click(function() {
rotation += -180;
$(this).css({'-webkit-transform' : 'rotate('+ rotation +'deg)',
'-moz-transform' : 'rotate('+ rotation +'deg)',
'-ms-transform' : 'rotate('+ rotation +'deg)',
'transform' : 'rotate('+ rotation +'deg)'});
});
$('#menutoggle').click(function() {
$(this).toggleClass('rotated');
});
$('#menutoggle').click(function () {
$(this).toggleClass("hov");
});
})
/*=====================
---- Menu Dropdown ----
=====================*/
$(function() {
$("#menutoggle").click(function () {
$(this).toggleClass("#mobilemenu");
});
$('#menutoggle').click(function(){
$('#mobilemenu').toggle('blind');
});
$("#mobilemenu li").click(function() {
$("#mobilemenu li").removeClass('hover');
$(this).addClass('hover');
});
$('a#hide, a#hide2').click(function(){
$('#mobilemenu').hide();
})
});