<div id="main-menu">
  <div id="menu-container-<?= $this -> menu['id'];?>">
   <?= \front\view\Menu::pages( $this -> menu['pages'], 0, $this -> current_page );?>
  </div>
</div>
<div id="main-menu-btn">
  <i class="fa fa-bars"></i>
</div>
<script class="footer" type="text/javascript">
  $(window).resize(function() {
    windowsize = $(window).width();
  });

  $( 'body' ).on( click_event, '#main-menu-btn', function()
  {
    if ( windowsize <= 767 ) 
    {
      if ( $( this ).hasClass( 'active' ) )
      {
        $( this ).removeClass( 'active' );
        $( '#main-menu' ).removeClass( 'visible' );
        $( '#main-menu-btn i' ).addClass( 'fa-bars' ).removeClass( 'fa-times' );
      }
      else
      {
        $( this ).addClass( 'active' );
        $( '#main-menu' ).addClass( 'visible' );
        $( '#main-menu-btn i' ).removeClass( 'fa-bars' ).addClass( 'fa-times' );
      }
    }
  });

  $( 'body' ).on( click_event, '#menu-container-<?= $this -> menu['id'];?> > ul > li > a', function(e)
  {
    if ( windowsize <= 767 ) 
    {
      if ( $( this ).parent().hasClass( 'parent' ) )
        e.preventDefault();

      if ( !$( this ).parent().hasClass( 'active' ) )
      {
        $( '#menu-container-<?= $this -> menu['id'];?> > ul > li' ).removeClass( 'active' );
        $( this ).parent().addClass( 'active' );
      }
    }
  });
</script>