Простое мобильное меню для сайта

Мобильное меню открывающееся при клике на кнопку (гамбургер и тд).

В данном примере на полный экран.

Кнопка открытия .mob_btn размещается в любом месте согласно макету.

Кнопка закрытия .mob_btn_close находится внутри полноэкранного блока с меню.

Контейнер для меню .mob_container размещается в любом месте в коде.

html

<a href="#" class="mob_menu_btn">Меню</a>

<div class="mob_container hide">
    <div class="mob_btn_close">Закрыть</div>
 <?php  wp_nav_menu( [ 
          'container_class' => 'menu',
          'theme_location'  => 'mobile_menu'] ); ?>
</div>

CSS

body.noscroll {
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: hidden;
}

.mob_container {
  background: #fff;
  position: fixed;
  z-index: 200;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding:  20px;
}
.mob_menu_container.hide {
display: none; 
}

.mob_menu_close {
position: absolute; right: 20px; top: 20px;
}

js

jQuery(function($){

  $( ".mob_btn, .mob_btn_close" ).click(function() {
  $( ".mob_container" ).toggleClass('hide');
  $( "body" ).toggleClass('noscroll');
  });

});