mobilní sidovací menu

Toggle class name on click in jQuery

by Petr Haluza

HTML

<div class="container">
	<ol class="ml-menu">
		<li>
			<a href="#" class="ml-has-submenu">1.jedna</a>
			<ol class="ml-submenu">
				<li class="ml-back">
					<a href="#">Back</a>
				</li>
				<li>
					<a href="#" class="ml-has-submenu">2.jedna</a>
					<ol class="ml-submenu">
						<li class="ml-back"><a href="#">Back</a><li>
						<li><a href="#">3.jedna</a></li>
						<li><a href="#">3.dva</a></li>
					</ol>
					
				</li>
				<li>
					<a href="#">2.dva</a>
				</li>
				<li>
					<a href="#">2.tří</a>
				</li>
			</ol>
		</li>
		<li>
			<a href="#" class="ml-has-submenu">1.dva</a>
			<ol class="ml-submenu">
				<li class="ml-back">
					<a href="#">Back</a>
				</li>
				<li>
					<a href="#">First Sub Item</a>
				</li>
				<li>
					<a href="#">Second Sub Item</a>
				</li>
				<li>
					<a href="#">Third Sub Item</a>
				</li>
			</ol>
		</li>
		<li>
			<a href="#" class="ml-has-submenu">Third Item</a>
			<ol class="ml-submenu">
				<li class="ml-back">
					<a href="#">Back</a>
				</li>
				<li>
					<a href="#">First Sub Item</a>
				</li>
				<li>
					<a href="#">Second Sub Item</a>
				</li>
				<li>
					<a href="#">Third Sub Item</a>
				</li>
			</ol>
		</li>
		<li>
			<a href="#">Fourth Item</a>
		</li>
	</ol>
</div>

SCSS

ol {margin:0;padding:0;	position:absolute;list-style-type:none;}
.container {}
.ml-menu {background-color:#9e1847;	width:400px; overflow:hidden}
.ml-menu {background-color:#9e1847;	}

a {
	display:block;
	padding: 15px 20px;
	position:relative;
	color:white;
	text-decoration:none;
}

.ml-back {
	background-color:rgba(0,0,0,0.1);
}

.ml-submenu {
	background-color:#9e1847;
	position:absolute;
	top:0;
	transition:right .25s ease-in;
	right:-100%;
	width:100%;

}

.ml-submenu.open {
	right:0;
	z-index:2;
}

.ml-has-submenu {
	position:relative;
	&::after {
		content:'>';
		position:absolute;
		right:10px;
	}
}

.ml-back a {
	&::before {
		content:'<';
		display:inline-block;
		margin-right:10px;
	}
}

JavaScript

$('.ml-has-submenu').on('click', function(e){
	$(this).next().addClass('open');
});

$('.ml-back a').on('click', function(e){
	$(this).closest('.ml-submenu').removeClass('open');
});