Wie ein Fach CSS3 Menü zu definieren

Split-Taste Menüs bieten eine Möglichkeit, Ihre CSS3 Website einen speziellen Look zu geben. Die Split-Taste sagt die Zuschauer, dass die Standard-Menüauswahl ist das, was sie im Moment zu sehen, sondern dass andere Auswahlmöglichkeiten zur Verfügung. Einfach klicken Sie auf die Split-Taste nimmt zu den Standard-Site der Betrachter.

Doch neben der Schaltfläche den Pfeil nach unten klicken, werden die anderen Optionen und der Betrachter einen von ihnen als Alternative zu einem Standard leicht auswählen können.

Diese Art von Menü ist nicht beschränkt auf nur die Menschen zu anderen Orten zu leiten. Es kann auch für eine Form als eine Art von Eingabefeld handeln. Die Schaltfläche zeigt die Standardauswahl für dieses Feld. Sie können jedoch auch eine der Alternativen wählen, ob sie besser funktionieren. Der Punkt ist, dass Split-Taste Menüs bieten ein spezielles Konzept zum Menü Entwicklung.

Das Beispiel in diesem Artikel basiert auf dem Split Menü-Buttons v1.2 Beispiel gezeigt bei Dynamic Drive. In den folgenden Schritten erhalten Sie begonnen, um es mit diesem speziellen Menü und bieten Anregungen für Änderungen möchten Sie vielleicht zu machen.

  1. Laden Sie die splitmenubuttons.js-Datei in dem Schritt 1-Abschnitt des Dynamic Drive Seite gefunden, und es dann in der Ordner, den Sie für Ihre Testseite verwenden möchten.

  2. Laden Sie die splitmenubuttons.css-Datei in dem Schritt 1-Abschnitt des Dynamic Drive Seite gefunden, und es dann in der Ordner, den Sie für Ihre Testseite verwenden möchten.

  3. Erstellen Sie eine neue HTML-5-Seite Ihrem bevorzugten Texteditor oder IDE, und speichern Sie es als SplitButton.HTML.

  4. Ändere das Tag wie hier gezeigt:

    Ein Beispiel für einen Split-Taste Menü verwenden

  5. Klicken Sie auf Alles markieren in dem Schritt 2 Teil des Dynamic Drive-Seite.

    Sie sehen den Header-Code für das Beispiel hervorgehoben.

  6. Kopieren Sie den markierten Text in die Zwischenablage und fügen Sie ihn in die Abschnitt der Beispielseite.

    Der Editor fügt den Code an die Abschnitt. Wenn Sie genau auf diesen Code, so finden Sie einen Link zu splitmenubuttons.css und ein Skript Bezug auf splitmenubuttons.js. Dieses Beispiel stützt sich auch auf jQuery, so dass Sie finden ein Skript Bezug auf jquery.min.js.

    Der Code enthält auch ein Skript für die Split-Schaltflächen erstellen, die jQuery-Syntax verwendet. Sie werden nicht so lange brauchen, um dieses Skript zu ändern, wie Sie bei der Erstellung Ihrer Speisekarte ein paar einfache Regeln zu befolgen. Die Schritte, die diese Regeln befolgen zu diskutieren.

  7. Erstellen von Verknüpfungen für jedes der oberen Menüeinträge in der Abschnitt der Seite wie folgt:

    ZuhauseProdukteEtwa

    Jeder dieser Einträge ist ein Top-Level-Menü-Taste für die Seite. Wenn der Benutzer die Seite zeigt, zeigt es Home, Produkte, und über drei Tasten. Jede der Tasten wird an einen bestimmten Ort zu gehen, wenn darauf geklickt. Sie können jedoch # für das Attribut href ersetzen, wenn Sie nicht über eine Schaltfläche wollen, etwas zu tun, wenn darauf geklickt.

    Die Klasse muss als splitmenubutton muss in jedem Fall. Sie können die CSS für diese Klasse in der splitmenubuttons.css Datei.

    Die Daten-showmenu Attribut legt fest, welche zu verwenden Untermenü. Sie müssen einen Namen definieren, auch wenn Sie nicht vorhaben, ein Untermenü mit einer bestimmten Taste zu verwenden. In diesem Beispiel sind die Home-Taste werden keine Untermenüs.

    Die Daten-splitmenu Attribut gibt an, ob eine Taste, um den Pfeil nach unten, als Teil der Taste oder als separate Taste anzeigen soll. Dieses Beispiel zeigt, beide Fälle. Die Standardeinstellung ist wahr, was bedeutet der Pfeil als separate Schaltfläche angezeigt wird.

    Sie verwenden die Daten-menucolors Attribut die Farben für die Standardhintergrundfarbe und der gewählten Farbe verwendet zu spezifizieren. Die Standardfarbe ist dunkelrot, aber die meisten Entwickler werden die Standardwerte außer Kraft setzen einen bestimmten Look zu erhalten.

  8. Erstellen Sie ein Untermenü für die Produkte Menü mit dem folgenden Code:

  9. Artikel 1
  10. Artikel 2
  11. Artikel 3
  12. Artikel 4
  13. Artikel 5

    14. Ein Untermenü ist einfach eine ungeordnete Liste. Jede der Listenelemente enthält einen Anker, der die Position verweist auf Sie den Betrachter gehen möchten. Die ungeordnete Liste muss ein id-Attribut-Wert haben, der die Daten-showmenu Attributwert entspricht. Darüber hinaus muss die erste Stufe der ungeordnete Listen in einem Untermenü die splitdropdown Klasse.

  14. Erstellen Sie ein Untermenü für die Über-Menü mit dem folgenden Code:

  15. Unsere Geschichte
  16. Datenschutzerklärung
  17. Kontaktiere uns
  18. Mit dem Telefon
  19. Per Mail
  20. Per E-Mail
  21. Webmaster
  22. Unterstützen

    23. Dieses Menü ist ein wenig komplexer. Wenn Sie Untermenüs Ihres Untermenüs erstellen möchten, legen Sie einfach die entsprechende ungeordnete Liste in der Artikelliste, wie dargestellt. Der Kontakt Untermenü enthält tatsächlich drei Ebenen von Menüoptionen.

    Fügen Sie die class = "Separator" Attribut, wenn Sie ein wenig mehr Raum zwischen den Menüpunkten hinzufügen möchten. Dieses Attribut macht es für Benutzer möglich, die Beziehungen zwischen den Menüpunkten mit größerer Leichtigkeit zu sehen.

  23. Speichern Sie die geänderte SplitButton.HTML und laden Sie es in Ihrem Browser.

    Sie sehen die einfache Ausgabe.

    bild0.jpg

Beachten Sie, dass die Home-Taste erscheint wie jede andere Taste, aber es fehlt ein Pfeil nach unten, weil es keine zugehörige Menü hat. Durch Anklicken dieser Schaltfläche gelangen Sie auf die Startseite.

Wie bei jedem anderen CSS-basierten Menü können Sie eine Reihe von Änderungen an der Darstellung dieser Menüs machen. Zum Beispiel ist es möglich, gezeigt, dass die Pfeile auf etwas anderes als die einfache Dreieck zu ändern.

Ähnliche

Menü