2

ドロップダウン メニューとしてではなく、第 2 レベルのトップ ナビゲーション バーを作成したい。最初の行の下に 2 番目の行として表示されます。例 (* がアクティブであることを意味します):

nav1 | nav2* | nav3

nav2a | nav2b

次のようになります。

<div class="navbar" id="topnavi">
    <div class="navbar-inner">
        <ul class="nav">
            <li>
                <a href="#">nav1</a>
                <ul class="secondlevel">
                    <li><a href="#">nav1a</a></li>
                    <li><a href="#">nav1b</a></li>
                    <li><a href="#">nav1c</a></li>
                </ul>
            </li>
            <li>
                <a href="#">nav2</a>
                <ul class="secondlevel">
                    <li><a href="#">nav2a</a></li>
                    <li><a href="#">nav2b</a></li>
                </ul>
            </li>
            <li>
                <a href="#">nav3</a>
            </li>
        </ul>
    </div>
</div>

何か案は？

4

1 に答える 1

1

ドロップダウン クラスを使用し、いくつかのスタイルを上書きして、ネストされたドロップダウン アイテムがプライマリ アイテムの下のセカンダリ ナビゲーションとして表示されるようにしました。これは私が理解している一般的な方向性です。お役に立てば幸いです。

HTML:

    <div class="navbar">
      <div class="navbar-inner">
          <ul class="nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
              </ul>
            </li>
          </ul>
      </div>
    </div>

CSS:

    .nav > li {
         display: inline-block;
     }
    .dropdown-menu{
         display: inline;
         position: relative;
     }
     .dropdown-menu > li{
         display:inline-block;
     }
于 2014-06-26T20:40:37.980 に答える