我实际上正在尝试使用 html css 和 js 构建一个网页我想让它响应我尝试给出 right:-200;让它消失但失败了[关闭]

Question

我尝试将导航栏设置为 top:0;右：-200；为了让它消失，我们的js和函数我希望它在我点击切换时打开，但是当我给出-200时，我有水平滚动帮助我澄清这个疑问

我尝试给出正确的值：-200；想让它不出现在屏幕上，我希望制作一个将其值更改为 0 的 js 函数，但我最终得到了水平滚动

Answer 1

试试这个例子作为参考

jQuery(".tooglebutton").click(function(){
      jQuery('nav').css('width','250px');
      console.log('test1');
    });
    jQuery(".closebtn").click(function(){
      jQuery('nav').css('width','0px');
    });

.pagecontainer{
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
    }
.mainheader{
  background-color: #fff;
  padding: 20px;
}
.headerinnerwrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;

}
.logo p {
  color: #000;
}
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  color: #fff;
}

.menu li {
  margin-left: 20px;color: #fff;
}

@media(min-width:768px){
  .tooglebutton,.closebtn{display: none;}
}
@media(max-width:767px){
  /* menu */
  nav{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0 ,0,0,0.9);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  .tooglebutton {
    font-size: 20px;
    line-height: 20px;
    color: #000;
    font-weight: bolder;
    cursor: pointer;
  }
  nav .closebtn {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 36px;
    margin-left: 50px;
    text-decoration: none;
    color: #ccc;
  }
  .menu{
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="mainheader">
    <div class="pagecontainer">
      <div class="headerinnerwrapper">
        <div class="logo">
              <p><a href="#">Dummy</a></p>
        </div>
        <div class="tooglebutton">
          <span>&#9776;</span>
        </div>
        <nav>
          <a href="javascript:void(0)" class="closebtn" >&times;</a>
          <ul class="menu">
            <li><a href="#" class="thispage">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>