隐藏的侧边栏，展开我的视口，如何更改它？

问题描述

我制作了带有侧边栏列表的汉堡菜单，用于带有一些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中的设备模式下对此进行了测试，所以我不知道它在手机上的外观如何（但是我想滚动不会不会以魔术的方式消失）。我也尝试使用display:none;来获取不活动列表，但是此命令不支持动画。可以解决这个想法，还是设计有误？

解决方法

您可以使用溢出属性 overflow-x：hidden; This is to remove scroll horizontally At it to the body style sheet

,

我建议将侧边栏与position: fixed一起使用，特别是对于移动视图。 因此，侧边栏的位置不受正文滚动位置的影响：

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

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,no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
   <p>Lorem ipsum dolor sit amet,no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
     <p>Lorem ipsum dolor sit amet,no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
</section>