侧面菜单宽度动画?

我想设置一个侧边的导航条,当点击汉堡包图标时显示隐藏。已经实现了,但问题是ul里面的li’s也在做动画,我看到它们在过渡时收缩,然后随着导航条的增长而增长。希望你能明白我的意思。我如何设置才能看到只有父元素(sideNav)的宽度 “增长”?目前来看,在li’s上看到这种过渡有点丑陋。

我正在为一个有动态内容的CMS主题工作(所以大多数元素已经继承了样式,所以我想弄清楚是什么原因导致了li’s上的动画),标记是,或多或少,像这样。

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>

先谢谢大家了。

解决方案:

通常情况下,当我想实现这个功能时,我不是将宽度改为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";
}

根据你的使用情况,这可能不是你要找的东西,但可能是一个不错的选择。

给TA打赏
共{{data.count}}人
人已打赏
未分类

Python美女汤汽车排行榜刮刮乐

2022-9-9 8:59:19

未分类

我如何在ggplot中绘制3个变量分离图?

2022-9-9 9:10:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索