1

私のナビゲーションバーに関する助けを本当に歓迎します。私は、最も明白なセットアップと考えるものを達成しようとしています。大きな画面ではドロップダウン メニュー、小さな画面ではドリルダウン。ここにペンがありますが、そこにあるはずのない箇条書きがあり、大きな画面ではメニューが横に開きます (縦にしたい)。

<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>
4

1 に答える 1

0

ペンは私にとってはうまく機能するので、垂直メニューの問題については完全にはわかりません. 誤った箇条書きに関しては、いくつかの重要なクラスが欠落しています。サイトのタイトルには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>

更新されたペンはこちら

于 2016-01-31T14:14:08.697 に答える