保持jQuery滑動推下頁面沒有絕對定位

Question

我試圖創建一個簡單的jQuery滑動菜單，但它推動頁面下來，我並不真的想要這樣。我不能使用絕對定位。

這是我現在所擁有的jsfiddle。

任何幫助或建議將不勝感激！

Answer 1

把導航欄與固定高度的容器。這可以防止內容移動。

<div class="navbar_container"> 
    <ul class="navbar">  
... 
    </ul> 
</div> 

.navbar_container { 
    height: 60px; 
} 

Example jsfiddle

如果你想在菜單走了過來，你必須雖然使用絕對定位的內容。

Answer 2

使用包含分區：

<div class="navbarWrapper"> 
    <ul class="navbar">  
     <li class="link">Username 
      <div class="dropdown"> 
       <a href="#">Profile</a><br /> 
       <a href="#">Logout</a> 
      </div> 
     </li> 
    </ul> 
</div> 

...並添加到您的CSS：

.navbarWrapper 
{ 
    height: 1em; 
} 

.navbar 
{ 
    ... 
    position: absolute; 
    ... 
}