1

いくつか検索しましたが、megaBarの情報しか見つかりませんでした。100％の幅のドロップダウン幅を持ち、Foundationの上にできるだけ少ないcss/jsで実装したいと考えています。

Mashableのものと同様の100％ウィンドウ幅でホバー時に表示されるサブメニュー（ul> li.has-dropdown-> ul.dropdown）を実行したいと思います。Foundation megaBarはネストされたnav構造の外側にありますが、それは私のWordpressテンプレートに望むものではありません（ネストされたウォーカータイプのメニューツリーにとどまりたい）。

Mashableのトップメニューリンクのいずれかにカーソルを合わせると、コピーしたいドロップダウンサブメニューが表示されます（コンテンツではなく構造のみ）。

ドロップダウン付きのマシャブルトップメニュー

私はFoundation3.2を使用しており、Mashableサイトと同様に<div class="contain-to-grid fixed"><nav class="top-bar">、上部に固定され、常にウィンドウ幅が100％になるように設定されていますが、上部のバーにはがあります。max-width: 1440px

今、私はドロップダウン（サブメニュー）の部分を検討する必要があります。

4

4 に答える 4

5

これにより、トップ バーのサブメニューがトップ バーの幅の 100% になるようにリセットされ、サブメニュー アイテムがレスポンシブ列に整理されます。これはフライアウト コンテンツと同じですが、小さな画面サイズでのナビゲーション動作は維持されます。

@media only screen and (min-width: $screenSmall) {

    nav.top-bar > section > ul > li.has-dropdown{
        position: static;
        & > .dropdown{
            @include outerRow();

            & > li.has-dropdown{
                @include column(3);
                min-width: auto;

                .dropdown{
                    @include outerRow();
                    position: static;
                    visibility: inherit;
                    top: auto !important;
                    left: auto !important;
                    padding: 0;
                    min-width: auto;
                    li{
                        @include column(12);
                         min-width: auto;
                    }
                }
            }
        }
    }
}
于 2013-04-08T14:51:03.077 に答える
1

Foundationにはドロップダウンメニューの機能が付属しているため、Mashableで使用されるナビゲーションのタイプをFoundationフレームワークで複製できます。

ドキュメントを読んだ場合：http： //foundation.zurb.com/docs/navigation.php

ナビゲーションバーの例では、ナビゲーションアイテム4に独自の行/列を持つドロップダウンがあることがわかります。ドキュメントによると、「行や列など、あらゆる種類のコンテンツを含むことができる特定のサイズのドロップダウンを作成することもできます。」

CSSを使用してフライアウトクラスのサイズを変更することにより、ページにまたがるようにドロップダウンのサイズを指定できるはずです。

于 2013-02-05T10:50:30.053 に答える
-3

この UI コンポーネントは Foundation の一部ではありません ( Foundation Componentsを参照)。すでに述べたように、ドロップダウン メニューはネストされたメニュー要素の表示に制限されています。

Mashable サイトと同じ機能を作成することは Foundation の範囲外であり、独自に開発する必要があります。質問は、 Stack Overflow で回答するのに適していないIMHOです。

于 2013-02-04T14:14:04.857 に答える