汉堡菜单滑入动画走出屏幕

Question

我正在尝试使用 HTML、CSS 和 JS 制作汉堡菜单滑入/滑出动画，但侧边栏的起点超出屏幕（并且超出 html 正文），从而留下水平滚动。我尝试过不使用“位置：绝对”，但它似乎不起作用。

这是问题的图片：

Look at the horizontal scroll

动画滑入效果很好，问题是这个水平滚动。另外：我不知道为什么滑出动画不起作用。

function hamburguer_menu() {
  const botao_hamburguer = document.querySelector('#botao_hamburguer')
  const sidebar = document.querySelector('.sidebar')
  
  if (sidebar.style.opacity == 0) {
    sidebar.style.opacity = 1
    sidebar.style.translate = '0'
    sidebar.style.transition = 'translate ease-in 0.5s'
  } else {
    sidebar.style.opacity = 0
    sidebar.style.translate = '100%'
    sidebar.style.transition = 'translate ease-in 0.5s'
  }
}

html,
body {
  min-height: 100dvh;
  max-width: 100dvw;
  padding: 0;
  margin: 0;
}

#layout_bar {
  background-color: black;
  height: var(--heading_height);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-shadow: #000000a1 1px 0px 9px 0px;
}

.botao_hamburguer {
  background-color: pink; /* transparent; */
  border: none;
  z-index: 2;
}

.sidebar {
  opacity: 0;
  transition: translate ease-in 0.5s;
  text-align: center;
  margin: 0;
  padding: 0;
  right: 0%;
  z-index: 1;
  position: absolute;
  translate: 100%;
  top: 0%;
  background-color: rgb(27, 27, 27);
  color: white;
  width: 300px;
  min-height: 100dvh;
}

<body>
  <!-- script src="/static/fit/js.js"></script -->
  
  <heading id="layout_bar">
    <h1 id="logo"><a href=""><span class="bigger">B</span>e<span class="bigger">B</span>etter</a></h1>
    <button type="button" onclick="hamburguer_menu()" id="botao_hamburguer" class="botao_hamburguer">
      <span class="material-symbols-outlined icon-branco">menu</span>
      <span class="material-symbols-outlined icon-branco" style="display: none;"></span>
    </button>
  </heading>

  <aside class="sidebar">
    <ul style="list-style-type: none;">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </aside>

</body>

Answer 1

问题是翻译后的元素留下了原来的框。您需要处理多余的空间。我在你的侧边栏周围放了一个带有隐藏溢出的框。

另请注意我对你的脚本的修改。最好不要在脚本中手动应用样式，而是更改 CSS 类。我还从侧边栏中删除了一些不需要的 CSS 属性，零值不需要单位。

function hamburguer_menu() {
  document.querySelector('.sidebar').classList.toggle('in');
}

html,
body {
  min-height: 100dvh;
  max-width: 100dvw;
  padding: 0;
  margin: 0;
}

#layout_bar {
  background-color: black;
  height: var(--heading_height);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-shadow: #000000a1 1px 0px 9px 0px;
}

.botao_hamburguer {
  background-color: pink;
  border: none;
  z-index: 2;
}

.sidebar-box {
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

.sidebar {
  opacity: 0;
  transition: all ease 0.5s;
  text-align: center;
  z-index: 1;
  margin-right: -100%;
  background-color: rgb(27, 27, 27);
  color: white;
  width: 0;
  min-height: 100dvh;
}

.sidebar.in {
  opacity: 1;
  margin-right: 0;
  width: 300px;
}

<body>
  <!-- script src="/static/fit/js.js"></script -->

  <heading id="layout_bar">
    <h1 id="logo"><a href=""><span class="bigger">B</span>e<span class="bigger">B</span>etter</a></h1>

    <button type="button" onclick="hamburguer_menu()" id="botao_hamburguer" class="botao_hamburguer">
      <span class="material-symbols-outlined icon-branco">menu</span>
      <span class="material-symbols-outlined icon-branco" style="display: none;"></span>
    </button>
  </heading>

  <div class="sidebar-box">
    <aside class="sidebar">
      <ul style="list-style-type: none;">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </aside>
  </div>
</body>

汉堡菜单滑入动画走出屏幕

问题描述投票：0回答：1

1个回答

最新问题

汉堡菜单滑入动画走出屏幕

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1