jQuery addClass example

Change class name on click in jQuery

by Artur Soul

HTML

<header>
  <div class="wrap">
    <nav id="nav">
						<ul class="menu">
							<li  class="active"><a class="menu-item" href="#">HOME</a></li>
							<li class="menu-list">
								<a class="menu-item"  href="#">ABOUT US</a>
								<ul class="submenu">
									<li><a href="#">Item</a></li>
									<li>
										<a href="#">Item</a>
										<i class="fas fa-angle-right"></i>
										
											<ul class="submenu-level">
												<li><a href="#">Item 1</a></li>
												<li><a href="#">Item 2</a></li>
											</ul>
									</li>
									<li><a href="#">Item</a></li>
								</ul>
							</li>
							<li><a class="menu-item"  href="#">CONTACT</a></li>
						</ul>
					</nav>
					<div class="menuToggle" id="menu-btn">
						<span></span>
					    <span></span>
					    <span></span>
					    <span></span>
					</div>
  </div>
</header>

CSS

header{
  background:gray;
  height: 100%;
}
.wrap{
 	max-width: 1140px;
	padding: 0 20px;
	margin: 0 auto;
}

.wrap:after{
	clear: both;
	display: table;
	content: "";
}

.stop-scrolling{
	height: 100%;
	overflow: hidden;
}

.touchmove{
	height: 100%;
	overflow: hidden;
}

#nav {
	margin-left: auto;
}

#nav ul{
	margin:0;
	padding: 0;

	align-items: center;
	order: 0;
  flex: 1 1 auto;
	align-self: auto;
	list-style: none;

}

nav .menu{
		display: none;
		flex-direction: column;
		position: absolute;
		height: 100%;
		background: #ca6f3a;
		opacity: 0.9;
		width: 100%;
		top: 120px;
		left: 0;
		z-index: 200;
	}



#nav ul li{
	cursor: pointer;
	position: relative;
}

#nav ul li .menu-item{
	font-family: 'Lato', sans-serif;
	text-decoration: none;
	font-size: 1em;
	color:#454546;
	padding-bottom: 41px;
}

#nav .menu .submenu{
	display: flex;
	transition: all 0.5s ease 0.5s;
	-webkit-transition: all 0.5s ease 0.5s;
	-moz-transition: all 0.5s ease 0.5s;
	-o-transition: all 0.5s ease 0.5s;

}

#nav .menu .submenu li i{
	color:#454546;
}

#nav .menu .submenu li:hover i{
	color: #fff;
}

#nav ul li.active .menu-item{
	border-bottom: 5px solid #00b5d2;
	color: #fff;
}

.menuToggle{
	display: block;
	cursor: pointer;
	width: 45px;
	height: 35px;
	position: relative;
	margin-left: auto;

}
.menuToggle span{
	background: #454546;
	width: 100%;
	height: 5px;
	position: absolute;
	display: block;
	left: 0;
  	transform: rotate(0deg);
  	transition: .25s ease-in-out;
}
.menuToggle span:nth-child(1){
	top: 0px;
}
.menuToggle span:nth-child(2),
.menuToggle span:nth-child(3){
	top: 13px;
}
.menuToggle span:nth-child(4){
	top: 26px;
}

 .menuToggle.menu-state-open span:nth-child(1){
	top: 0px;
	transform: rotate(45deg);
}

 .menuToggle.menu-state-open span:nth-child(2),
 .menuToggle.menu-state-open span:nth-child(3){
 	display: none;
 }

 .menuToggle.menu-state-open span:nth-child(4){
	top: 0px;
	transform: rotate(-45deg);
}

#nav .menu li .submenu{
	display: none;
	position:...

JavaScript

jQuery(document).ready(function(){
let current = 'menu-state-open';

   $('.menuToggle').on('click', function() {
        $('body').addClass('stop-scrolling');
        $('body').bind('touchmove', function(e){e.preventDefault()})

    	$(this).addClass(current);
        $('#nav .menu').toggle({ direction: "left" }, 1000, function(){
            if($(this).css('display') === "none"){
                $(this).removeAttr('style');
                $('.menuToggle').removeClass(current);
                $('body').removeClass('stop-scrolling');
                $('body').unbind('touchmove');
            }
       });
    });


     $('#nav ul li').on('click', function(){
            let current = $('#nav ul li');

            current.removeClass('active');
		    $(this).addClass('active');
       });
  
});