Анимация ширины бокового меню?

Question

Я пытаюсь настроить боковую панель навигации, которая показывает / скрывает при нажатии на значок гамбургера. Уже вроде это достигнуто, но проблема в том, что и ли внутри ul оживляют; Я вижу их на переходе сужается, а затем растет с Nav Div. Надеюсь, что вы понимаете, о чем я. Как я могу установить это, чтобы видеть только родительский элемент (sideNav), чтобы «расти» по ширине? Сейчас довольно странно видеть этот переход на языке li.

Я работаю над темой для CMS с динамическим содержимым c (поэтому большинство элементов уже унаследовали стили, поэтому я ' Я пытаюсь выяснить, что вызывает анимацию на li), разметка, более или менее, выглядит следующим образом.

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

.sideNav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: 0;
  height: 100%;
  overflow-x: hidden;
  transition: all 0.5s ease;
}

<span id="openMenu" onclick="openNav()">Menu</span>

<nav class="sideNav">
  <div class="navBar_primary">
    <ul>
      <li class="navBar_item">
        <a href="#">Item</a>
        <ul class="navBar_secondary">
          <li class="navBar_item">
            <a href="#">Submenu Item</a>
          </li>
        </ul>
      </li>
      <li class="navBar_item">
        <a href="#">Item 2</a>
      </li>
    </ul>
  </div>
</nav>

Спасибо всем заранее.

Answer 1

Обычно, когда я пытаюсь выполнить sh, вместо того, чтобы изменить ширину на 0px, я меняю левую позицию на отрицательную ширину.

.sideNav {
  position: fixed;
  top: 0;
  left: -250px;
  z-index: 9;
  width: 250px;
  height: 100%;
  overflow-x: hidden;
  transition: all 0.5s ease;
}

function openNav() {
  document.getElementById("mySidenav").style.left= "0px";
}

Может быть не совсем то, что вы ищете, в зависимости от вашего варианта использования, но может быть хорошей альтернативой.

Answer 2

 <nav id="sidenav">
    <ul>
        <li><a href="" class="home">HOME</a></li>
        <li><a href="">ABOUT US</a></li>
        <li><a href="">FEATURES</a></li>
        <li><a href="">COURSES</a></li>
        <li><a href="">OFFER</a></li>
        <li><a href="">CONTACT</a></li>
    </ul>
</nav>
<i class="fas fa-hamburger" id="menuBtn"></i>

 <script>
        var menuBtn = document.getElementById("menuBtn");
        var sidenav = document.getElementById("sidenav");

        sidenav.style.right = "-300px";
        menuBtn.onclick = function(){
            if(sidenav.style.right == "-300px"){
                sidenav.style.right= "0";
            }
            else{
                sidenav.style.right = "-300px";
            }
        }
   
    </script>

#sidenav{
    width:300px;
    height: 100vh;
    position: fixed;
    right: -300px;
    top: 0;
    background:#353a85e8;
    z-index:2;
    transition: .5s;
    padding-top: 60px;
}

nav  ul li{
    list-style: none;
    margin: 50px 20px;
}
nav ul li a{
    text-decoration: none;
    color: white;
}
#menuBtn{
    font-size: 40px;
    color:#5d66d3;
    position: fixed;
    right: 65px;
    top: 35px;
    z-index: 2;
    cursor: pointer;
}

 <nav id="sidenav">
        <ul>
            <li><a href="" class="home">HOME</a></li>
            <li><a href="">ABOUT US</a></li>
            <li><a href="">FEATURES</a></li>
            <li><a href="">COURSES</a></li>
            <li><a href="">OFFER</a></li>
            <li><a href="">CONTACT</a></li>
        </ul>
    </nav>
    <i class="fas fa-hamburger" id="menuBtn"></i>