响应式 CSS 导航栏来自底部。 -100% 不删除答案

【问题标题】：CSS navigation bar on responsive come from the bottom. -100% doesnt remove响应式 CSS 导航栏来自底部。 -100% 不删除
【发布时间】：2021-06-14 02:53:46
【问题描述】：

我正在开发一个响应式导航栏，但有一点问题。说到响应部分，当点击移动按钮时，导航栏覆盖来自底部。我知道如何使用 -left: 100%;但是虽然这会将它从页面底部完全删除-100％；只是将其保留在页面上，但将其放在网站的较低位置。

这是一个示例代码：

<div class="wrapper">
  <nav class="navbar">
    <ul class="menu__links">
      <li><a href="#">Example</a></li>
      <li><a href="#">Example</a></li>
      <li><a href="#">Example</a></li>
</ul>
</nav>
<div class="navicon"><i class="fa fa-bars"</i></div>
</div>

.wrapper .navbar {
    position: absolute;
    background: #262626;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 100px;
}


.wrapper .navbar {
    float: right;
}

.wrapper .navbar menu__links {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.wrapper .navbar menu__links li {
    list-style: none;
    



@media (max-width: 991px){
    .wrapper {
        padding: 0 20px;
    }
    
    .navicon {
        display: block;
    }
    
    .wrapper .navbar {
        position: absolute;
        width: 100%;
        height: calc(100vh - 50px);
        background: #333;
        top: 50px;
        left: -100%; <---- THIS is how I know how to remove the navbar completely from the page and when the button is clicked it transiton on. I want this expect from the bottom of the page

      bottom: -100% <-- This is what I tried but it just lowers the content lower on the page and is visible
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .wrapper .navbar.active {
        left: 0;
    }
    
    .wrapper .navbar .menu__links {
        display: block;
        text-align: center;

    }
   
}



        $(document).ready(function(){
            $('.navicon').click(function(){
                $('.navbar').toggleClass('active');
            })
            
            $('.menu__links li').click(function(){
                $(this).siblings().removeClass('active');
                $(this).toggleClass('active');
            })
        })

【问题讨论】：

标签： html jquery css jquery-mobile navbar

【解决方案1】：

这里缺少一个大括号：

.wrapper .navbar menu__links li {
    list-style: none;
} /* this is missing in your code */

@media (max-width: 991px){

因为这个height: calc(100vh - 50px);，它在页面上。如果您希望它在进入移动屏幕时隐藏（最大宽度：991px），请删除此高度并尝试使用 top 道具：

类似这样的：

.wrapper .navbar {
  position: absolute;
  background: #262626;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 100px;
  transition: top 2s ease-out; /* i have add this */
  top: 0px; /* i have added this */
}

和

@media(max-width: 991px) {
  .wrapper {
    padding: 0 20px;
    background: red;
  }
        
  .navicon {
    display: block;
  }
        
  .wrapper .navbar {
     transition: top 2s ease-in; /* i have added this */
     top: 9999px; /* and also this, a really great top position */
     position: absolute;
     width: 100%;
     background: #333;
     -webkit-transition: 0.5s;
  }

您也可以删除它，因为您使用的是绝对位置：

.wrapper .navbar {
  float: right;
}

【讨论】：