Multi level mobile menu

index.html

<nav id="mobile_menu">
  <div class="level _show" id="1">
      <a href="#11">Link 1 <i class="ion-ios-arrow-right -icon"></i></a>
      <a href="/about">Link 2</a>
      <a href="/about">Link 3</a>
      <a href="/about">Link 4</a>
      <a href="/about">Link 5</a>
  </div>
  
  <div class="level" id="11">
      <a href="#1"><i class="-back -icon ion-ios-arrow-thin-left"></i> Back</a>
      <a href="/about">Link 1</a>
      <a href="/about">Link 2</a>
      <a href="/about">Link 3</a>
      <a href="/about">Link 4</a>
  </div>
</nav>

mobile.js

$(function() {
    $('#mobile_menu .level > a').on('click', function() {
        var id = $(this).attr('href');
        if (id.charAt(0) == '#') {
            $('#mobile_menu .level._show').removeClass('_show');
            $(id).addClass('_show');
            return false;
        }
    });
});

mobile.scss

#mobile_menu {
  .level {
    @include cross-browser(transition, all .5s);
    position: relative;
    left: 100%;
    right: -100%;

    &._show {
      right: 0;
      left: 0;
    }
  }
}