Сворачивающееся меню

<!--Сворачивающееся меню-->
<!--https://mt-webdesign.ru/roll-up-->
<div class="roll_up_menu_close">
<span></span>
<span></span>
<span></span>
</div>
<style>
:root {
--Roll-up-color-burger: #fff; /*цвет полосок на иконке меню*/
--Roll-up-pc-height: 550px; /*высота выпадающего меню на ПК*/
--Roll-up-pc-height-top: -450px; /*высота выезда меню на ПК (должна быть меньше, чем меню (формула: "высота выезжающего меню" - "высота первоначального меню" = "высота выезда меню")*/
--Roll-up-m-height: 450px; /*высота выпадающего меню на телефоне*/
--Roll-up-m-height-top: -390px; /*высота выезда меню на телефоне (должна быть меньше, чем меню (формула: "высота выезжающего меню" - "высота первоначального меню" = "высота выезда меню")*/
}
.content_show {
position: fixed;
z-index: 33;
opacity: 1 !important;
pointer-events: auto !important;
transition: opacity 200ms cubic-bezier(0.77, 0, 0.175, 1);
}
.roll_up_show_content {
position: fixed;
opacity: 0;
z-index: 33;
pointer-events: none;
transition: opacity 200ms cubic-bezier(0.77, 0, 0.175, 1);
}
.roll_up_menu_close span {
width: 20px;
height: 0;
border: 1px solid var(--Roll-up-color-burger);
display: block;
left: 50%;
border-radius: 6px;
position: absolute;
transform: translate(-50%, -50%);
}
.roll_up_menu_close:hover > span:nth-child(1) {
height: 12px;
border: 2px solid var(--Roll-up-color-burger);
transition: height 200ms cubic-bezier(0.77, 0, 0.175, 1);
top: 46%;
}
.roll_up_menu_close:hover > span:nth-child(2) {
transition: 200ms cubic-bezier(0.77, 0, 0.175, 1);
top: 58%;
}
.roll_up_menu_close:hover > span:nth-child(3) {
transition: 200ms cubic-bezier(0.77, 0, 0.175, 1);
top: 58%;
} 
.roll_up_menu_close > span:nth-child(1) {
transition: height 200ms cubic-bezier(0.77, 0, 0.175, 1);
top: 44%;
}
.roll_up_menu_close > span:nth-child(2) {
transition: 200ms cubic-bezier(0.77, 0, 0.175, 1);
top: 50%;
}
.roll_up_menu_close > span:nth-child(3) {
transition: 200ms cubic-bezier(0.77, 0, 0.175, 1);
top: 56%;
}
.roll_up_trigger_active .roll_up_menu_close > span:nth-child(1) {
transform: rotate(224deg) translate(3px, -10px);
transition: transform 200ms cubic-bezier(0.77, 0, 0.175, 1);
}
.roll_up_trigger_active .roll_up_menu_close:hover > span:nth-child(1) {
height: 0px;
border:1px solid var(--Roll-up-color-burger);
top: 44%;
}
.roll_up_trigger_active .roll_up_menu_close:hover > span:nth-child(3) {
top: 56%;
}
.roll_up_trigger_active .roll_up_menu_close > span:nth-child(3) {
transform: rotate(136deg) translate(2px, 11px);
transition: transform 200ms cubic-bezier(0.77, 0, 0.175, 1);
}
.roll_up_trigger_active .roll_up_menu_close > span:nth-child(2) {
opacity: 0;
pointer-events: none;
transition: opacity 200ms cubic-bezier(0.77, 0, 0.175, 1);
} 
.body_hidden {
overflow: hidden;
transition: overflow 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.roll_up_menu_close {
width: 100%;
height: 100%;
background: transparent;
display: block;
position: absolute;
left: 0;
top: 0;
border-radius: 30px;
}
.uc-roll_up {
position: fixed;
z-index: 999;
transform: translateY(0);
transition: transform 0.3s ease;
}
.roll_up_overlay {
width: 100vw;
position: fixed;
height: 100vh;
z-index:0;
top: 0;
background: rgba(0,0,0,.5);
left: 0;
opacity: 0;
pointer-events: none;
transition: opacity 800ms cubic-bezier(0.77, 0, 0.175, 1),
z-index 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.roll_up_overlay_active {
cursor: pointer;
opacity: 1;
pointer-events: auto;
z-index:998;
transition: opacity 800ms cubic-bezier(0.77, 0, 0.175, 1),
z-index 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.roll_up_trigger {
position: fixed;
cursor: pointer;
z-index: 32;
transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.roll_up_trigger_active {
transform: translateY(var(--Roll-up-pc-height-top));
transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.roll_up_menu {
position: fixed;
z-index: 31;
transition: height 800ms cubic-bezier(0.77, 0, 0.175, 1),
transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.roll_up_menu_show {
height: var(--Roll-up-pc-height) !important;
transform: translateY(var(--Roll-up-pc-height-top));
transition: height 800ms cubic-bezier(0.77, 0, 0.175, 1),
transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.roll_up_menu .tn-atom {
transition: opacity 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.roll_up_menu_show .tn-atom {
pointer-events: auto;
opacity: 1 !important;
transition: opacity 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.roll_up_hide_content {
opacity: 1;
pointer-events: auto;
position: fixed;
z-index: 33;
transition: opacity 200ms cubic-bezier(0.77, 0, 0.175, 1);
}
.roll_content_hide {
opacity: 0 !important;
pointer-events: none;
position: fixed;
z-index: 33;
transition: opacity 200ms cubic-bezier(0.77, 0, 0.175, 1);
}
.uc-roll_up {
position: fixed !important;
pointer-events: none;
bottom: 0 !important;
width: 100%;
z-index: 999 !important;
}
.uc-roll_up .tn-atom {
pointer-events: all !important;
}
.uc-roll_up .roll_up_show_content .tn-atom {
pointer-events: none !important;
}
.uc-roll_up .content_show .tn-atom {
pointer-events: all !important;
}
.uc-roll_up .roll_content_hide .tn-atom{
pointer-events: none !important;
}
@media screen and (max-width: 479px) {
#rec605727582 .t396__artboard {
position: fixed;
z-index: 999;
min-height: 0 !important;
height: 0 !important;
}
#rec605727582 {
height: 0 !important;
}
.roll_up_trigger_active .roll_up_menu_close:hover > span:nth-child(1) {
height: 0px;
border:1px solid var(--Roll-up-color-burger);
top: 44%;
}
.roll_up_trigger_active .roll_up_menu_close:hover > span:nth-child(3) {
top: 56%;
}
.roll_up_menu_close:hover > span:nth-child(1) {
height:0px;
border: 1px solid var(--Roll-up-color-burger);
transition: height 200ms cubic-bezier(0.77, 0, 0.175, 1);
top: 44%;
}
.roll_up_menu_close:hover > span:nth-child(2) {
transition: 200ms cubic-bezier(0.77, 0, 0.175, 1);
top: 50%;
}
.roll_up_menu_close:hover > span:nth-child(3) {
transition: 200ms cubic-bezier(0.77, 0, 0.175, 1);
top: 56%;
} 
.roll_up_menu_show {
height: var(--Roll-up-m-height) !important;
transform: translateY(var(--Roll-up-m-height-top));
}
.roll_up_trigger_active {
transform: translateY(var(--Roll-up-m-height-top));
}
}
</style>
<script>
$(".roll_up_menu_close").appendTo('.roll_up_trigger');
var isMenuOpen = false;
$(document).on('click', '.roll_up_trigger', function(e) {
if (!isMenuOpen) {
setTimeout(function() {
$(".roll_up_show_content").addClass('content_show');
}, 400);
setTimeout(function() {
$(".roll_up_hide_content").toggleClass('roll_content_hide');
}, 200);
isMenuOpen = true;
} else {
$(".roll_up_show_content").removeClass('content_show');
$(".roll_up_hide_content").removeClass('roll_content_hide');
isMenuOpen = false;
}
$(".roll_up_trigger").toggleClass('roll_up_trigger_active');
$(".roll_up_overlay").toggleClass('roll_up_overlay_active');
$(".roll_up_menu").toggleClass('roll_up_menu_show');
$(".t-body").toggleClass('body_hidden');
});
$(document).on('click', '.roll_up_overlay, .roll_up_show_content a', function(e) {
$(".roll_up_show_content").removeClass('content_show');
$(".roll_up_hide_content").removeClass('roll_content_hide');
isMenuOpen = false;
setTimeout(function() {
$(".roll_up_trigger").removeClass('roll_up_trigger_active');
$(".roll_up_overlay").removeClass('roll_up_overlay_active');
$(".roll_up_menu").removeClass('roll_up_menu_show');
$(".t-body").removeClass('body_hidden');
}, 300);
});
$(document).ready(function() {
var overlay = $('<div>').addClass('roll_up_overlay');
var body = $('.t-body');
overlay.appendTo(body);
});
</script>