Side menu width animation?

Question

I'm trying to set up a side navbar that show/hide on click on a hamburger icon. Already kinda achieved that, but the problem is that also the li's inside the ul are animating; I see them on transition shrinked and then growing with the nav div. Hoping that you understand what I mean. How can I set this up in order to see only the parent element (sideNav) to 'grow' in width? It's kinda ugly as of now to see that transition on the li's.

I'm working on a theme for a CMS with dynamic content (so most of the elements has already inherited styles, so I'm trying to figure out what cause the animation on the li's), the markup is, more or less, like this.

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>

Thank you all in advance.

By animating `width`, you a causing [reflow](https://stackoverflow.com/a/27637245/3624336) of the content of your menu. You're better off hiding your menu by using `transform` instead. — chriskirknielsen, Apr 24 '20 at 15:48

TrevaskisB · Accepted Answer · 2020-04-24T16:32:15.187

Typically when I'm looking to accomplish this, rather than changing the width to 0px, I change the left position to the negative width.

.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";
}

Might not be exactly what you're looking for based on your use case, but might be a good alternative.

score 0 · Answer 2 · answered Apr 24 '20 at 15:49

 <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>

Side menu width animation?

2 Answers2