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

不完全确定垂直菜单问题，因为笔对我来说工作正常。关于错误的要点，您遗漏了一些重要的 classes。对于站点标题，您使用的是 li 而没有周围的 ul 元素。在标题周围添加 ul 和 menu 的 class 以解决该问题：

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

子菜单缺少相同的 menu class:

<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

Foundation6 响应式导航

Foundation6 responsive navigation

zurb-foundation

zurb-foundation-6