ureech,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<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: #228ae6;
cursor: pointer;
}
.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: 2
}
.mobile_menu_container ul li ul.loaded {
-webkit-transform: translateX(0px);
transform: translateX(0px)
}
.mobile_menu_container ul li ul.activity {
overflow-y: auto;
overflow-x: hidden
}
@media (max-width: 320px) {
.mobile_menu_container {
width: 240px
}
}
.back:after {
content: "\1F814";
font-size: 42px;
text-align: right;
display: block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(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");
$(this).next(":not(.add)").prepend($('<li><a href="#" class="back"></a></li>')).addClass("add")
}),
$(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")
})
})
});
</script>
</head>
<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>
</body>
</html>