-1

画面に柔軟に対応できるメニューが欲しい。ul の幅が画面よりも小さい場合、すべての li は次のようになります。

Menu1     Menu2      Menu3       Menu4

ただし、ul が長すぎるか、画面が小さくなる場合:

 Menu1      Menu2      Menu3       Menu4        Menu5      Menu6      More >

画面の幅を長くするその他のメニュー (Menu7、Menu8) は、新しいメニュー「その他」のドロップダウンにリストされます。

4

1 に答える 1

1

メディアクエリを使用する必要があります。基本的に、メディアクエリを使用すると、ブラウザのサイズやその他の動的機能に応じて要素の css を変更できます。このフィドルはこちらで参照できます。

私がやったことは、リスト要素を使用して標準のナビゲーションバーを作成したことです

<div class="navbar">
    <button class='small-nav'>Navigation</button>
    <div class='nav-container'></div>
    <div class="navbar-list">
        <ul>
            <li class="active"><a href="#menu1">Menu1</a>
            </li>
            <li><a href="#menu2">Menu2</a>
            </li>
            <li><a href="#menu3">Menu3</a>
            </li>
            <li><a href="#menu4">Menu4</a>
            </li>
        </ul>
    </div>
</div>

その後、デフォルトの syling で、最終的にリスト項目を保持するボタンと nav-container を非表示にしました。ブラウザのサイズが変更されると、メディア クエリはメイン リストを非表示にし、ボタンを表示します。

@media (max-width:480px) {
    .navbar-list ul {
        display:none;
    }
    .small-nav {
        display:inline;
    }
}

ボタンをクリックすると、リストの内容を表示してクリックできます。

var list = $('.navbar-list').html();
$('.nav-container').append(list);
$('.small-nav').click(function () {
    $('.nav-container').toggle();
})

メディア クエリでは ul li 要素の表示スタイルが指定されていないため、通常のアイテム リストとして表示されます。

これを行うためのより簡単で高速な方法は、Bootstrap 折りたたみプラグインを使用して Twitter Bootstrap に示されています。このリンクはこちらを参照してください

于 2013-08-26T04:49:03.850 に答える