隐藏侧边栏，展开我的视口，怎么改？

Question

我用一些 js 为移动设备制作了带有侧边栏列表的汉堡菜单。这是代码：

<button class="hamburger">
            <span class="hamburger__box">
                <span class="hamburger__inner"></span>
            </span>
        </button>
        <div class="navigation">
            <ul class="navigation__list">
                <a href="zatrudnij-programiste-webowego"><li class="navigation__item">O mnie</li></a>
                <a href="zatrudnij-programiste-webowego"><li class="navigation__item">Oferta</li></a>
                <a href="html-css-js-php-bootstrap-seo-wordpress"><li class="navigation__item">Technologie</li></a>
                <a href="#"><li class="navigation__item 7" >Kontakt</li></a>
            </ul>
        </div>

有js:

<script>
            
            const hamburger = document.querySelector('.hamburger');
            const nav = document.querySelector('.navigation');
            

            const handleClick = () => {
            hamburger.classList.toggle('hamburger--active');
            nav.classList.toggle('navigation--active');

            }
            hamburger.addEventListener('click', handleClick);
        </script>

和css（部分）：

.hamburger
{
    width:100%;
    height: 72px;
    margin-right: auto;
    display: inline-block;
    cursor: pointer;
    background-color: transparent;
    border:0;
}

.hamburger, .navigation

{
    transition: transform .3s .1s ease-in-out;
}

.hamburger--active

{
    transform: translateX(-120px); 
}

.hamburger__box

{
    width:100px;
    height: 24px;
    display: inline-block;
    position:relative;

}

.hamburger__inner

{
    width: 100%;
    height: 10px;
    background-color: #ff7300;
    position:absolute;
    left:0;
    top:50%;
    transform: translateY(-50%); 
    transition: background-color.1s .2s ease-in-out;
}

.hamburger__inner::before
{
    content:'';
    width: 100%;
    height: 10px;
    background-color: #000;
    position:absolute;
    left:0;
    top:-20px;
    transition: transform.2s .2s ease-in-out;

}

.hamburger__inner::after
{
    content:'';
    width: 100%;
    height: 10px;
    background-color: #000;
    position:absolute;
    left:0;
    top:20px;
    transition: transform.2s .2s ease-in-out;

}
.navigation
{
    height:45vh;
    font-size:25px;
    width:200px;
    background-color: #ff7300;
    opacity: 0.9;
    position: absolute;
    top:0;
    right:0;
    transform: translateX(200px);
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
}
.navigation--active
{
    transform: translateX(0px);
}
.navigation__item
{
    margin-top: 30px;
    list-style: none;
}
.navigation__item
{
    margin-bottom: 10px;
    color:#fff;
    a
    {
        text-decoration: none;
        color: #000;
    }
}

将侧边栏菜单移出屏幕的想法很简单，但随后会显示水平滚动条，我只在 Firefox 的设备模式下对此进行了测试，所以我不知道它在我的 phone 上会是什么样子（但我想卷轴不会以神奇的方式消失）。我也尝试过使用 display:none; 作为非活动列表，但此命令不支持动画。有可能修正这个想法，还是它只是设计错误？

Answer 1

你可以使用溢出属性

overflow-x:hidden;

这是为了移除水平滚动到正文样式 sheet。

Answer 2

我建议使用带有 position: fixed 的侧边栏，尤其是对于移动视图。所以侧边栏的位置不受主体滚动位置的影响：

侧边栏 show/hide 的动画可以用 left 属性或 transform: translateX 完成。这是一个例子。请注意，我使用 root 变量保存了边栏的 width。

let burgerMenu = document.getElementById('burger-menu');
let sidebar = document.getElementById('sidebar');
burgerMenu.addEventListener('click', () => {
  sidebar.classList.toggle('sidebar__active');
});

:root{
  --sidebar-width: 120px;
}

body{
  magin: 0;
  padding: 0;
  background: #dedede;
}

.sidebar{
  position: fixed;
  top: 0;
  left: calc(-1 * var(--sidebar-width));
  width: var(--sidebar-width);
  height: 100vh;
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid black;
  transition: left 1s linear;
  z-index: 2;
}

.sidebar.sidebar__active{
  left: 0px;
}

.burger-menu{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
  height: 72px;
  font-size:36px;
}

.content{
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-top: 24px;
  padding-bottom: 24px;
  padding-right: 64px;
  padding-left: 64px;
  background: #fff;
  color: #000;
  font-size: 24px;
}

<nav id="sidebar" class="sidebar">
  Sidebar
</nav>

<button id="burger-menu" class="burger-menu">Toggle sidebar</button>

<section class="content">
 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
</section>

隐藏侧边栏，展开我的视口，怎么改？

Hidden sidebar, expand my viewport, how to change it?

javascript

css

sidebar

hamburger-menu