Многоуровневое push-меню слишком тяжелое / требовательное для браузеров

Question

Мне нужна небольшая помощь с этим мобильным многоуровневым «push» меню (такой же дизайн, как, например, в iOS на iPhone).

Мне просто нужен совет для лучшего оформления многоуровневого меню в CSSЯ думаю.

Все работает нормально, но это довольно тяжело для браузеров, и в некоторых старых устройствах Apple iPad будет падать во всех браузерах, когда я открою меню, и перейдет в какое-то подменю.Также между действиями есть задержка 3-4 секунды.

Во-первых, все меню спроектировано CSS за правой стороной браузера, но только на первом уровне, остальные уровни display: none, потому что если все многоуровневыеуже помещенный в абсолютную / фиксированную позицию, он будет абсолютно более тяжелым для браузеров, даже на рабочем столе, когда я попытался изменить размер окна, потому что у нас действительно много уровней, не как в этом примере.Таким образом, в основном, если кто-то откроет меню первого раза, после этого все остальные подменю будут display: block.Так что вполне возможно, что это тяжелый вопрос для старых планшетов и устройств.

$(document).ready(function() {
  $('#nav-menu .nav-level a').click(function(e) {
    if ($(this).parent().find('.nav-level').length > 0) {
      if ($("body").hasClass("nav-menu-open")) {
        e.preventDefault();
        $(this).parent().find('.nav-level:first').addClass("nav-level-open");
        $(this).closest(".nav-level").addClass("nav-level-over");
        $(this).closest(".nav-level").animate({
          scrollTop: 0
        }, 300);
        $('html,body').animate({
          scrollTop: $("#nav-menu").offset().top
        });
      }
    }

  });

  $(function() {
    $('div.nav-level li').each(function() {
      if ($(this).find('.nav-level').length > 0) {
        $(this).find("a:first").addClass("sub");
      }
    });
  });

  $("#nav-menu .nav-close").on('click tap', function() {
    $("#nav-menu").removeClass("nav-menu-open");
    $("#nav-menu .nav-level").removeClass("nav-level-open nav-level-over");
    $("#nav-menu .nav-head-switch").removeClass("nav-head-active");
    $("#nav-menu .nav-head-switch:first").addClass("nav-head-active");
    $("body").removeClass("nav-menu-open");
    $("#nav-menu").addClass("nav-hidden");
    return false;
  });

  $("#nav-menu .nav-back").on('click tap', function() {
    $(this).closest(".nav-level").removeClass("nav-level-open");
    $(this).closest(".nav-level-over").removeClass("nav-level-over");
    return false;
  });

  $(".nav-trigger").on('click tap', function() {
    $("#nav-menu").removeClass("nav-hidden");
    $("body").toggleClass("nav-menu-open");
    $("#nav-menu").toggleClass("nav-menu-open");
    return false;
  });
});

#nav-menu {
  overflow-y: auto;
}

#nav-menu.nav-hidden .nav-level {
  display: none !important;
}

#nav-menu .nav-level {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
}

#nav-menu .nav-level>* {
  width: 100%;
}

#nav-menu ul {
  list-style: none;
}

#nav-menu,
#nav-menu .nav-level {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(100%, 0, 0);
}

#nav-menu .nav-level {
  overflow-y: hidden;
}

#nav-menu .nav-level.nav-level-open {
  overflow-y: auto;
}

#nav-menu .nav-level-1 {
  overflow-y: auto;
}

#nav-menu .nav-level-over {
  overflow-y: hidden !important;
}

#nav-menu .nav-head-box {
  transform: translate3d(100%, 0, 0);
}

.nav-level #nav-menu {
  -webkit-transition: transform 0.3s;
  -moz-transition: transform 0.3s;
  transition: transform 0.3s;
}

#nav-menu .nav-head-slide.nav-head-active .nav-head-box,
#nav-menu.nav-menu-open,
#nav-menu .nav-level.nav-level-open,
#nav-menu>.nav-level,
#nav-menu>.nav-level.nav-level-open,
#nav-menu.nav-overlap>.nav-level,
#nav-menu.nav-overlap>.nav-level.nav-level-open {
  transform: translate3d(0, 0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#menu" class="header-tool-inner d-flex align-items-center p-reset nav-trigger">open</a>

<nav class="nav-menu nav-open" id="nav-menu">
  <div class="nav-level nav-level-1">
    <ul class="list-arrows">
      <li>
        <a href="">Level 1</a>
        <div class="nav-level nav-level-2">
          <ul>
            <li>
              <a href="">Level 2</a>
              <div class="nav-level nav-level-3">
                <ul>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                </ul>
              </div>
            </li>
            <li>
              <a href="">Level 2</a>
              <div class="nav-level nav-level-3">
                <ul>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <a href="">Level 1</a>
        <div class="nav-level nav-level-2">
          <ul>
            <li>
              <a href="">Level 2</a>
              <div class="nav-level nav-level-3">
                <ul>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                </ul>
              </div>
            </li>
            <li>
              <a href="">Level 2</a>
              <div class="nav-level nav-level-3">
                <ul>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</nav>