侧面菜单宽度的动画?

我正在尝试设置一个侧面导航栏,该导航栏在单击汉堡图标时显示/隐藏。 已经有点实现了,但是问题是ul内部的li也正在制作动画。我看到过渡时它们缩小了,然后随着nav div的增长而增长。希望你理解我的意思。如何设置此设置以便仅看到父元素(sideNav)的宽度“增长”?到目前为止,看到li身上的过渡有点难看。

我正在为具有动态内容的CMS创建主题(因此大多数元素已经继承了样式,因此我试图找出是什么原因导致了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>

谢谢大家。

评论
  • 红颜祸水
    红颜祸水 回复
     <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>
  • nquis
    nquis 回复

    通常,当我希望完成此操作时,我没有将宽度更改为0px,而是将左侧位置更改为负宽度。

    .sideNav {
      position: fixed;
      top: 0;
      left: -250;
      z-index: 9;
      width: 0;
      height: 100%;
      overflow-x: hidden;
      transition: all 0.5s ease;
    }
    
    function openNav() {
      document.getElementById("mySidenav").style.left= "0px";
    }
    

    可能不完全取决于您的用例,但可能是一个不错的选择。