Wie man ZURB Foundation Top-Bar Dropdown-Menü aus 100% Breite?

Habe etwas gesucht, aber nur gefunden-info für die megaBar. Haben möchte, die 100% Breite dropdown breiten und implementieren Sie es mit wie wenig css/js auf der Oberseite der Foundation wie möglich.

Ich würde gerne ein sub-Menü (ul > li.hat-dropdown -> ul.dropdown), die zu 100% Fensterbreite ähnlich der auf Mashable und zeigt auf hover. Die Stiftung megaBar ist außerhalb der verschachtelten nav-Struktur, aber das ist nicht das, was ich möchte für meine WordPress-template (die bleiben wollen in der verschachtelten walker Art Menü-Struktur).

Wenn Sie den Mauszeiger über einen der top-Menü-links auf Mashable, sehen Sie in der dropdown-Untermenü möchte ich kopieren (nur die Struktur, nicht den Inhalt).

Wie man ZURB Foundation Top-Bar Dropdown-Menü aus 100% Breite?

Ich bin mit der Foundation 3.2 und die <div class="contain-to-grid fixed"><nav class="top-bar"> setup, so dass es fest auf der Oberseite und immer 100% der Fensterbreite, während die top-bar hat eine max-width: 1440px, genau wie das Mashable-Website.

Nun brauche ich nur noch die dropdown - (sub-Menü) Teil sussed out.

InformationsquelleAutor J W | 2013-02-04

  1. 5

    Diese setzen Ihr top-Leiste Untermenü zu 100% deiner oberen Leiste die Breite und organisieren Ihre Untermenüpunkte im responsive Spalten, wie ein flyout-content aber immer noch die Erhaltung der navigation Verhalten auf dem kleinen Bildschirm Größe 

    @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;
                    }
                }
            }
        }
    }
}

    InformationsquelleAutor 321zeno

  2. 2

    Stiftung kommt mit der Funktionalität für ein dropdown-Menü, so können Sie replizieren die Art der navigation verwendet, die von Mashable mit dem Foundation framework.

    Wenn Sie die Dokumentation zu Lesen:
    http://foundation.zurb.com/docs/navigation.php

    Du wirst sehen, dass in der Nav-Bar-Beispiel, Nav-Element 4 hat eine dropdown-Liste mit seiner eigenen Spalten/Zeilen. Wie pro die docs "können Sie auch dropdowns mit einer bestimmten Größe enthalten kann jede Art von content, einschließlich der Zeilen und Spalten."

    Sollten Sie in der Lage, geben Sie die Größe der dropdown-so, dass es reicht die Seite, durch die Verwendung von CSS zu ändern, die Größe des flyout-Klasse.

    InformationsquelleAutor

  3. 0

    Habe ich überall gesucht, für eine einfache Antwort darauf, wie man die drop down mega menu 100% der container, und es hier gefunden:

    http://codepen.io/sldavidson/full/Jseph

    Eine wesentliche Stil, war dies:

    .open {left: 0 !important;}

    InformationsquelleAutor MsMaryMak

  4. -3

    Diese UI-Komponente ist nicht Teil der Stiftung (siehe Foundation-Komponenten). Wie Sie bereits erwähnen, die dropdown-Menü beschränkt sich auf das zeigen verschachtelte Menü-Elemente.

    Schaffen die gleiche Funktionalität wie in der Mashable-Website ist außerhalb der Reichweite der Stiftung und umfasst die Entwicklung, die es durch Ihre eigenen. Die Frage ist IMHO nicht geeignet, um beantwortet werden in Stack Overflow.

    Können Sie erläutern, warum Sie glauben, diese Frage ist nicht geeignet für den stack? Die Seite, die Sie verlinkt nicht geben, würde alles, was zu disqualifizieren, diese Frage.
    alle Fragen, die gut in unser format. Vermeiden Sie Fragen, die sind in Erster Linie Meinung basiert, oder, die wahrscheinlich zu generieren, die Diskussion eher auf, als Sie beantwortet." Es gibt viele verschiedene Möglichkeiten, um was Ihr bittet. Vielleicht könnte man erneut die Frage stellen, zu finden alternativen außerhalb von ZURB Foundation.
    Gibt es nicht immer mehrere Möglichkeiten, um alles bauen?

    InformationsquelleAutor Naoise Golden

Schreibe einen Kommentar