JSFiddle - React, Tailwind, and code Playground

by ureech

HTML

<html>
  <body>
  <div class="menu_container">
			<a href="#" class="mobile_menu">Показать меню</a>
		</div>
		<div class="mobile_menu_container">
			<div class="mobile_menu_content">
      
   				<ul>
					<li>
						<a href="#" class="parent">Компьютерная техника</a>
						<ul>
							<li><a href="#">Компьютерная техника</a></li>
							<li>
								<a href="#" class="parent">Ноутбуки и аксессуары</a>
								<ul>
									<li><a href="#">Ноутбуки и аксессуары</a></li>
									<li><a href="#">Ноутбуки</a></li>
									<li><a href="#">Аксессуары</a></li>
									<li>
										<a href="#" class="parent">Компьютеры и комплектующие</a>
										<ul>										
											<li><a href="#">Компьютеры и комплектующие</a></li>
											<li><a href="#">Компьютеры</a></li>
											<li><a href="#">Моноблоки</a></li>
										</ul>
									</li>
									<li><a href="#">Перифирия</a></li>
								</ul>
							</li>
							<li><a href="#">Техника для печати</a></li>

						</ul>
					</li>
					<li><a href="#">Строительство и ремонт</a></li>

				</ul>   
      
      </div>
      </div>
      <div class="mobile_menu_overlay"></div>
      
		<style type="text/css">
			body, html{
				margin: 0;
				padding: 0;
				font-size: 16px;
				line-height: 20px;
				font-family: "Arial";
				height: 100%;
				min-height: 100%;
			}
			.menu_container{
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 100%;
				width: 100%;
			}
			.mobile_menu{
				font-size: 20px;
    			display: inline-block;
    			vertical-align: top;
    			line-height: 26px;
    			padding: 12px 25px;
    			color: #ffffff;
    			background: #4dadf7;
    			border-radius: 2px;
    			border: none;
    			width: auto;
    			margin: 0;
    			text-decoration: none;
    			-webkit-transition: all 400ms;
    			-moz-transition: all 400ms;
    			transition: all 400ms;
			}
			.mobile_menu:hover{
				background:...

CSS

.mobile_menu_overlay,
.mobile_menu_container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.mobile_menu_container,
.mobile_menu_container ul li ul {
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	transition: all 200ms
}

.mobile_menu_overlay {
	display: none;
	cursor: pointer;
	z-index: 10200;
	background: rgba(0, 0, 0, 0.5)
}

.mobile_menu_container {
	-webkit-transform: translateX(-300px);
	transform: translateX(-300px);
	width: 300px;
	overflow: hidden;
	z-index: 10201;
	background: #3884da
}

.mobile_menu_container.loaded {
	-webkit-transform: translateX(0px);
	transform: translateX(0px)
}

.mobile_menu_container .mobile_menu_content {
	overflow: auto;
	max-height: 100%;
	padding-bottom: 30px
}

.mobile_menu_container ul {
	margin: 0;
	padding: 0
}

.mobile_menu_container ul li {
	list-style: none
}

.mobile_menu_container ul li a {
	display: block;
	padding: 15px 20px;
	line-height: 20px;
	font-size: 16px;
	background: #3884da;
	color: #fff;
	text-decoration: none;
	font-weight: bold
}

.mobile_menu_container ul li a.parent {
	padding-right: 50px;
	background: #3884da url("images/arrow_right.svg") right 20px center no-repeat;
	background-size: 20px
}

.mobile_menu_container ul li a.parent:hover {
	background: #3c8de8 url("images/arrow_right.svg") right 20px center no-repeat;
	background-size: 20px
}

.mobile_menu_container ul li a.back {
	padding-left: 50px;
	background: #3c8de8 url("images/arrow_left.svg") left 20px center no-repeat;
	background-size: 20px;
	box-sizing: border-box;
	min-height: 50px
}

.mobile_menu_container ul li a.back:hover {
	background: #3c8de8 url("images/arrow_left.svg") left 20px center no-repeat;
	background-size: 20px
}

.mobile_menu_container ul li a:hover {
	background: #3c8de8
}

.mobile_menu_container ul li ul {
	-webkit-transform: translateX(300px);
	transform: translateX(300px);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #3884da;
	z-index:...

JavaScript

$(function() {

  $(document).on("click", ".mobile_menu_container .parent", function(e) {
    e.preventDefault(), $(".mobile_menu_container .activity").removeClass("activity"), $(this).siblings("ul").addClass("loaded").addClass("activity")
  }), 
  $(document).on("click", ".mobile_menu_container .back", function(e) {
    e.preventDefault(), $(".mobile_menu_container .activity").removeClass("activity"), $(this).parent().parent().removeClass("loaded"), $(this).parent().parent().parent().parent().addClass("activity")
  }),
  $(document).on("click", ".mobile_menu", function(e) {
    e.preventDefault(), $(".mobile_menu_container").addClass("loaded"), $(".mobile_menu_overlay").fadeIn()
  }), 
  $(document).on("click", ".mobile_menu_overlay", function(e) {
    $(".mobile_menu_container").removeClass("loaded"), $(this).fadeOut(function() {
      $(".mobile_menu_container .loaded").removeClass("loaded"), $(".mobile_menu_container .activity").removeClass("activity")
    })
  })
});