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元素。在标题周围添加ul类menu来修复该问题：

<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

Foundation6响应式导航

1 个答案: