Foundation6響應式導航

Question

真的會對我的導航欄提供一些幫助。我試圖達到我認爲最明顯的設置。在較大的屏幕上下拉菜單，並在較小的屏幕上下鑽。我有一支筆here，但有子彈標記不應該在那裏，並且菜單在較大的屏幕上水平打開（我想垂直）。

<div class="title-bar" data-responsive-toggle="nav-menu" data-hidefor="medium"> 
    <button class="menu-icon" type="button" data-toggle></button> 
    <div class="title-bar-title player-controls">Brand 
    </div> 
</div> 

<div class="top-bar" id="nav-menu"> 
    <div class="row"> 
     <div class="top-bar-left show-for-medium"> 
      Brand 
     </div> 

     <div class="top-bar-right"> 
      <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown"> 
       <li class="has-submenu"> 
        <a href="#">Item</a> 
        <ul class="vertical submenu" data-submenu> 
         <li role="menuitem"><a href="#">Sub-Item</a></li> 
         <li role="menuitem"><a href="#">Sub-Item</a></li> 
         <li role="menuitem"><a href="#">Sub-Item</a></li> 
         <li role="menuitem"><a href="#">Sub-Item</a></li> 
        </ul> 
       </li> 
       <li class=""><a href="#">Item</a></li> 
       <li class=""><a href="#">Item</a></li> 
       <li class=""><a href="#">Item</a></li> 
       <li class=""><a href="#">Item</a></li> 

      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

不完全確定垂直菜單問題，因爲筆對我工作正常。關於錯誤的要點，您錯過了一些基本類。對於網站標題，您使用的是li，而不包含周圍的ul元素。有一類menu添加ul周圍的標題來解決這個問題：

<ul class="menu"> 
    <li class="menu-text">Site Title</li> 
</ul> 

同樣menu類缺少子菜單：

<ul class="vertical submenu menu" data-submenu> 
    <li role="menuitem"><a href="#">Sub-Item</a></li> 
    <li role="menuitem"><a href="#">Sub-Item</a></li>       
    <li role="menuitem"><a href="#">Sub-Item</a></li> 
    <li role="menuitem"><a href="#">Sub-Item</a></li> 
</ul> 

這裏有一個更新的Pen