Multi Layered Drop-up Menu Twitter Bootstrap

-1

我的代碼如下。這出來是一個水平的菜單欄。我想把它放在頁腳中;因此，必須彈出。Multi Layered Drop-up Menu Twitter Bootstrap

HTML

<ul id="nav"> 
    <li> 
     <a href="#">Chicago Bears</a> 
     <ul> 
      <li><a href="">Running Backs</a></li> 
      <li><a href="">Quarterbacks</a></li> 
      <li><a href="">Lineman</a></li> 
     </ul> 
    </li> 
</ul>

CSS

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    width: 150px; 
} 

ul li { 
    position: top; 
} 

li ul { 
    position: absolute; 
    left: 149px; 
    top: 0; 
    display: none; 
} 

ul li a { 
    display: block; 
    text-decoration: none; 
    color: #777; 
    background: #fff; 
    padding: 5px; 
    border: 1px solid #ccc; 
    border-bottom: 0; 
} 

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    width: 150px; 
    border-bottom: 1px solid #ccc; 
} 

li:hover ul { 
    display: block; 
}

來源

2012-03-24 mehtaameet

你想在引導框架中創建一個彈出「向上」菜單嗎？ – 2012-03-24 22:09:31

要彈出哪個菜單？你到底想要什麼？因爲在頁腳下拉菜單表現不同，我的意思是如果他們接近頁面的底部。 – w3uiguru 2012-03-25 11:06:01

如果您曾使用Netflix --->在視頻觀看屏幕的底部，它有「更多情節」選項卡;想要創造類似的東西。因此，頁面的80％被視頻覆蓋，並且在底部（頁腳上方），用戶可以通過菜單導航到不同的頁面。因爲它的底部需要彈出而不是向下。 – mehtaameet 2012-03-25 13:51:45

回答另一個問題（已刪除）大約相同的前提下，彈出「向上」不降反升，這裏有一個菜單我對未來用戶的結果：

創建我自己的.dropup-menu class不要混淆下拉菜單的默認功能。在本課中，我將當前菜單項上的下拉菜單與箭頭一起定位，所以現在一旦點擊了可用下拉菜單，菜單就會向上打開。

CSS

.dropup-menu { 
    bottom: 100%; 
    top: auto !important; 
} 

/* position the arrow downwards, pointing to the menu */ 

.navbar .dropup-menu:before { 
    border-bottom: none; 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent; 
    border-top: 7px solid rgba(0, 0, 0, 0.2); 
    left: 7px; 
    top: 100%; 
} 

.navbar .dropup-menu:after { 
    border-bottom: none; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-top: 6px solid #fff; 
    left: 10px; 
    top: 100%; 
    left: 6px; 
} 

/* point the caret up*/ 

.up { 
    border-left: 4px solid transparent; 
    border-right: 4px solid transparent; 
    border-bottom: 4px solid #000000; 
    border-top: none; 
}

標記

爲了使用我們已有的類包括它的下拉菜單的容器內，就像這樣：

<ul class="dropdown-menu dropup-menu"> 
    <li>...</li> 
</ul>

演示：http://jsfiddle.net/andresilich/NMs4Z/2/

來源

2012-04-23 23:17:41

謝謝安德烈斯，救了我不得不使用寫同樣的黑客的麻煩：）歡呼！ – Hacknightly 2012-05-04 03:01:56

我想OP只是要求一種方法來將下拉菜單選擇放置在菜單欄上方。
從2.3.1開始，Bootstrap的實際版本已經集成並在示例中進行了解釋！

你只需要對類dropup添加到父的下拉元素的

<div class="btn-group dropup"> 
    <button class="btn">Dropup</button> 
    <button class="btn dropdown-toggle" data-toggle="dropdown"> 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
    <!-- dropdown menu links --> 
    </ul> 
</div>

Check the docs here，Dropup菜單的按鈕下拉節的最後一部分。

來源

2013-03-19 17:44:47 Gruber

Multi Layered Drop-up Menu Twitter Bootstrap

回答

相關問題