0

私のウェブサイトには、Twitter ブートストラップ上に構築されたメガ ドロップダウン メニューがあります。

ブートストラップビルドではなくレスポンシブなタブ付きメニューをメガドロップダウンアイテムに追加しようとしました。

ただし、そこにはうまく収まらず、トグル全体を包み込みます。

これは、全幅のメガ ドロップダウンを追加する方法です。

<li class="dropdown full-width"><a href="#" class="dropdown-toggle" data-toggle="dropdown">TEST<b
        class="icon-angle-down"></b></a>
</li>

ここでデモページを表示できます

ナビゲーションバー「ILETISIM」のアイテムにカーソルを合わせると、全幅に切り替わります。これはまさに私が望んでいるものです。twitterのbootstrapで作ったので

ここに画像の説明を入力

ただし、項目「テスト」を確認してください。後で追加したスクリプトは、twitter ブートストラップ ビルドではなく、レスポンシブであり、下の図に示すように、ナビゲーション バーを壊し、アイテムのliを全幅にします。

ここに画像の説明を入力

今までそれに対する解決策を見つけることができませんでした。

私が望むのは、「ILETISIM」アイテムの動作と同じように動作することです。

そのメニューを新しいものに置き換えます。

4

1 に答える 1

1

zozo タブを div でラップし、次のように 100% にします。

<div class="tab-wrapper dropdown-menu">
 zozo tabs here....
</div>

問題の残りの部分は、Twitter のナビゲーション メニューに関連しています。ul 内にあるホバー時にサブメニューが表示され、div 内に zozo タブが追加されました。

/*hide by default*/
.tab-wrapper{
    display: none;
    width: 980px; 
    left: -492.5px;
}
/*display on hover sub menu*/
.navbar ul.nav li:hover > .tab-wrapper {
    display: block;
}

要素全体の表示がなしに設定されているため、デフォルトのタブに問題が発生します。

更新: クラス タブ ラッパーを追加し、css スタイルを置き換えました。

更新 2 メニューが絶対配置されていることに気付きました。したがって、同じクラスを div ドロップダウン メニューに追加すると、スタイルから絶対的なものになり、さらにスタイルが追加されます。

更新 3 要素またはそのコンテナーが表示なしで非表示になっているため、モバイル ドロップダウン メニューが表示されます。表示された後、refresh メソッドを使用します。

    $(document).ready(function () {
         /*give your li id of test and it fire on mouseover to refresh the tabs*/
        $("#test").on("mouseover", function () {
            $("#tabbed-nav-02").data('zozoTabs').refresh();
        });
    });

また、タグ zozo-tabs と zozo-ui をスタックオーバーフローの投稿に追加していただけますか?

于 2013-07-23T09:25:05.520 に答える