實現具有搜索和下拉按鈕的導航欄？

歡迎來到我的第三個問題，就像7年一樣。我一直都很擅長潛伏。實現具有搜索和下拉按鈕的導航欄？

Anywho，我正在使用Materialize框架，並嘗試在右側創建一個垂直下拉菜單。這裏是我的代碼看起來像此刻：

<nav> 
    <div class="nav-wrapper"> 
    <div class="row"> 
     <div class="col s10"> 
     <form> 
      <div class="input-field"> 
      <input id="search" type="search" /> 
      <label for="search"><i class="material-icons">search</i></label> 
      </div> 
     </form> 
     </div> 
     <div class="col s2"> 
     <ul class="right"> 
      <!-- Dropdown Trigger --> 
      <i class="material-icons dropdown-button btn" href='#' data-activates='dropdown1'>reorder</i></a> 

      <!-- Dropdown Structure --> 
      <ul id='dropdown1' class='dropdown-content'> 
      <li><a href="/">Logout</a></li> 
      </ul> 
     </ul> 
     </div> 
    </div> 
    </div> 
</nav>

我想對於導航欄是透明的，直到我點擊它，當整個酒吧變成白色的搜索功能。右側的下拉菜單應位於導航欄內，當我點擊該菜單時，下面會顯示註銷。正如你從這兩張照片中看到的那樣，整個酒吧並沒有變成白色（我假設是因爲我已經把它放在了第10集中），並且下拉並沒有下降，而是在最上面。

謝謝你的任何幫助，請讓我知道，如果有你想看到的任何其他代碼！

來源

2016-09-19 J. Jackson

像https://jsfiddle.net/link2pk/qty77hec/5/？ – link2pk

那很簡單，謝謝！ –

要獲取下面的下拉菜單，您需要將下拉觸發器添加到 data-beloworigin="true" 。

而且，爲了得到它裏面NAV你需要給它position:absolute;

這裏的example

來源

2016-09-19 13:52:16 link2pk

實現具有搜索和下拉按鈕的導航欄？

回答

相關問題