Как добавить кнопку закрытия(close) в мобильном меню?

Question

Подскажите, пожалуйста, как доработать скрипт, чтобы в выдвигающемся мобильном меню, была кнопка закрытия меню ? https://codepen.io/dannyarty/pen/zYamxZK

 $(document).ready(function(){
  // Add class on parent which 'li' children has submenu
  $('ul.submenu').parents('li').addClass('megamenu');
  
  //Menu ICon Append prepend for responsive
  $(window).on('resize', function(){
    if ($(window).width() < 1024) {
      if(!$('#menu_trigger').length){
        $('#mainmenu').prepend('<a href="#" id="menu_trigger" class="menulines-button"><span class="menulines"></span></a>');
      }
      if(!$('.navtrigger').length){
        $('.megamenu > a').append('<span class="navtrigger"></span>')
      }
      if(!$('.mobile-menu').length){
        $('.menu').wrap('<div class="mobile-menu"></div>')
      }
      if(!$('.submenu > .backmenu-row').length){
        $('.submenu').each(function(){
          var subvalue = $(this).prev('a').text();
          //$(this).prepend('<a href="#" class="back-trigger">'+subvalue+'</a>');
          $(this).prepend('<div class="backmenu-row"><a href="#" class="back-trigger"></a><em>'+subvalue+'</em></div>');
        });
      }
    } else {
      $("#menu_trigger").remove();
      $('.navtrigger').remove();
      $('.menu').unwrap('.mobile-menu');
      $('.back-trigger').remove();
      $('.back-trigger').remove();
    }
  }).resize();
  
  
  // Mobile menu on click open
  $(document).on('click',"#menu_trigger", function(){
    if($('.megamenu').hasClass("sub-open")){
      $('.megamenu ').removeClass('sub-open');
      $('.mobile-menu').toggleClass('shown');
      $(this).toggleClass('menuopen');
    } else {
      $(this).toggleClass('menuopen');
      $(this).next('.mobile-menu').toggleClass('shown');
    }
    return false;
  });
  
  // While open submenu add class
  $(document).on('click', '.navtrigger', function(){
    $(this).parents('li').addClass('sub-open');
    return false;
  })
  
  // Back to menu in mobile
  $(document).on('click', '.back-trigger', function(){
    $(this).closest('li').removeClass('sub-open');
    return false;
  })
  
  
})

Answer 1

Из увиденного... дабы не нарушать целостность, вам нужна не кнопка "закрытия меню", а кликабельная кнопка. Например как-нибудь так: Сразу после <ul class="menu"> добавьте

<li id="close" class="close_menu"><a href="#">&#10006;</a></li>

В секцию @media only screen and (min-width: 1024px) добавьте

.close_menu {
   display: none;
}

Таким образом мы не видим её на больших экранах, а на малых разрешениях она вверху (разукрасите и выровняете на свой вкус сами). Обработку этой кнопки, дабы не мусорить в вашем избыточном коде я повесил в обработку так.

$(document).on('click', "#menu_trigger, #close", function(){
    if( this.id == 'close' ) {
        $(this).closest('.mobile-menu').removeClass('shown');
        console.log($(this).closest('.menulines'))
    }
    
    //...
}

А также,.. как по мне, то у вас во вложенных менюшках "Services" и "Product" в верхней строке перед названием нужна кнопка "назад". Сделайте её отталкиваясь от того, как я добавил "Закрыть" (но это вы уже сами).

БЛОГ НА HUSL

Как добавить кнопку закрытия(close) в мобильном меню?

Ответы (1 шт):