div被另一個div壓入時觸發

Question

我在這裏有兩個導航欄。當我點擊菜單btn時，邊欄將滑入。但不知何故，側邊欄向下推菜單欄，我不明白爲什麼。如何讓側邊欄停止按下菜單欄。任何提示將不勝感激。

function main(){ 
 
      $(".menu-bar").hide(); 
 
      $(".menu-bar").fadeIn(300); 
 
      $(".sidebar").hide(); 
 
      $(".dropdown-content").hide(); 
 

 
      $(".menu-btn").on('click',function(){ 
 
       $(".sidebar").animate({width:'toggle'}); 
 
       
 
      }); 
 
      $(".close-btn").on('click',function(){ 
 
       $(".sidebar").animate({width:'toggle'}); 
 
      }); 
 

 
      $(".login").on('click',function(){ 
 
       $(".dropdown-content").animate({width:'toggle'}); 
 
      }); 
 
     } 
 
     $(document).ready(main)

.sidebar{ 
 
    display:none; 
 
    width:250px; 
 
    background-color:#005777; 
 
    z-index:1; 
 
    padding-top:60px; 
 
    height:100%; 
 
    overflow:hidden; 
 
    
 
    } 
 
    .brand{ 
 
    font-family:ParmaPetit; 
 
    font-size:50px; 
 
    } 
 
    .sidebar a, .login{ 
 
    text-decoration:none; 
 
    padding: 8px 8px 8px 8px; 
 
    display:block; 
 
    font-size:30px; 
 
    text-align:center; 
 
    color:white; 
 

 
    } 
 
    .close-btn{ 
 
    position:relative; 
 
    font-size:40px; 
 
    float:right; 
 
    bottom:50px; 
 
    right:10px; 
 
    color:white; 
 
    } 
 
    .sidebar a:hover, .login:hover, .close-btn:hover, .menu-btn:hover{ 
 
    color:#01af55; 
 
    cursor:pointer; 
 
    transition:0.3s; 
 
    } 
 
    .dropdown-content{ 
 
    background-color:#111111; 
 
    position:relative; 
 
    left:250px; 
 
    bottom:29px; 
 
    } 
 
    .menu-bar{ 
 
    background-color:#005777; 
 
    padding-bottom:10px; 
 
    overflow:hidden; 
 
    float:top; 
 
    } 
 
    .menu-btn{ 
 
    font-size:40px; 
 
    cursor:pointer; 
 
    color:white; 
 
    position:relative; 
 
    left:20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sidebar" id="sidebar"> 
 
     <span class="close-btn">&times;</span> 
 
     <a href="#" class="brand" style="padding-bottom:50px;font-size:40px;">Airline Intel</a> 
 
     <a href="#">Book Flight</a> 
 
     <a href="#">Book Hotel</a> 
 
     <div class="dropdown"> 
 
      <span class="login">Sign In &#x27A4;</span> 
 
      <div class="dropdown-content"> 
 
       <a href="#">Admin</a> 
 
       <a href="#">User</a> 
 
       <a href="#">Register</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="menu-bar" id="collapse"> 
 
     <span class="menu-btn">&#9776;</span> 
 
    </div>

Answer 1

添加position : absolute;到側邊欄類應該做的伎倆

Answer 2

function main(){ 
 
      $(".menu-bar").hide(); 
 
      $(".menu-bar").fadeIn(300); 
 
      $(".sidebar").hide(); 
 
      $(".dropdown-content").hide(); 
 

 
      $(".menu-btn").on('click',function(){ 
 
       $('#collapse').hide(); 
 
       $(".sidebar").animate({width:'toggle'}); 
 
       
 
      }); 
 
      $(".close-btn").on('click',function(){ 
 
      $('#collapse').show(); 
 
       $(".sidebar").animate({width:'toggle'}); 
 
      }); 
 

 
      $(".login").on('click',function(){ 
 
       $(".dropdown-content").animate({width:'toggle'}); 
 
      }); 
 
     } 
 
     $(document).ready(main)

.sidebar{ 
 
    display:none; 
 
    width:250px; 
 
    background-color:#005777; 
 
    z-index:1; 
 
    padding-top:60px; 
 
    height:100%; 
 
    overflow:hidden; 
 
    
 
    } 
 
    .brand{ 
 
    font-family:ParmaPetit; 
 
    font-size:50px; 
 
    } 
 
    .sidebar a, .login{ 
 
    text-decoration:none; 
 
    padding: 8px 8px 8px 8px; 
 
    display:block; 
 
    font-size:30px; 
 
    text-align:center; 
 
    color:white; 
 

 
    } 
 
    .close-btn{ 
 
    position:relative; 
 
    font-size:40px; 
 
    float:right; 
 
    bottom:50px; 
 
    right:10px; 
 
    color:white; 
 
    } 
 
    .sidebar a:hover, .login:hover, .close-btn:hover, .menu-btn:hover{ 
 
    color:#01af55; 
 
    cursor:pointer; 
 
    transition:0.3s; 
 
    } 
 
    .dropdown-content{ 
 
    background-color:#111111; 
 
    position:relative; 
 
    left:250px; 
 
    bottom:29px; 
 
    } 
 
    .menu-bar{ 
 
    background-color:#005777; 
 
    padding-bottom:10px; 
 
    overflow:hidden; 
 
    float:top; 
 
    } 
 
    .menu-btn{ 
 
    font-size:40px; 
 
    cursor:pointer; 
 
    color:white; 
 
    position:relative; 
 
    left:20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sidebar" id="sidebar"> 
 
     <span class="close-btn">&times;</span> 
 
     <a href="#" class="brand" style="padding-bottom:50px;font-size:40px;">Airline Intel</a> 
 
     <a href="#">Book Flight</a> 
 
     <a href="#">Book Hotel</a> 
 
     <div class="dropdown"> 
 
      <span class="login">Sign In &#x27A4;</span> 
 
      <div class="dropdown-content"> 
 
       <a href="#">Admin</a> 
 
       <a href="#">User</a> 
 
       <a href="#">Register</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="menu-bar" id="collapse"> 
 
     <span class="menu-btn">&#9776;</span> 
 
    </div>

你需要隱藏的菜單按鈕，當你點擊它。並在您點擊關閉按鈕時顯示。