Wie Einrichten von Quick Navigation mit CSS3

Die meisten Websites bieten eine Art von Website Navigationshilfe. Wenn Sie diese Art von Unterstützung mit CSS3 Programmierung nicht angeben, kann der Benutzer verloren gehen und Sie werden verlieren Geschäft oder zumindest Aktivität. Site-Navigation macht Informationen leichter zu finden und zu verwenden. Darüber hinaus müssen Sie es wirklich, um für den Benutzer eine gute Nutzung Ihrer Website zu machen.

Im Folgenden wird beschrieben, wie Website-Navigation ohne Programmierung zu einer Seite hinzuzufügen. Es tut nichts Besonderes, aber es funktioniert gut mit den meisten Browsern.

  1. Erstellen Sie eine neue HTML5-Datei mit einem Texteditor.

  2. Geben Sie den folgenden Code für die HTML-Seite.

    Navigation User Interfaces
  3. Zuhause
  4. Produkte
  5. Eins
  6. Zwei
  7. Drei
  8. Vier
  9. Veranstaltungen
  10. Rot
  11. Grün
  12. Blau
  13. Orange
  14. Etwa
  15. Kontakt
  16. Gründung
  17. Privatsphäre

    18. Das Menüsystem besteht aus einer Anzahl von Listen. Jede ungeordnete Liste stellt eine weitere Ebene der Menüs. Dieses Beispiel hat nur zwei Schichten, aber sie können die Konzepte auf eine beliebige Anzahl von Schichten erwünscht leicht anzuwenden. Das Gesamtmenü wird mit einer ungeordneten Liste Element umschlossen (

      ) Mit dem Namen MainMenu-. Der Name ist wichtig, weil Sie es ausgiebig verwenden werden, wenn die erforderlichen Arten zu schaffen.

  18. Speichern Sie die Datei als navigation.html.

  19. Erstellen Sie eine neue CSS-Datei mit einem Texteditor.

  20. Geben Sie den folgenden CSS-Style-Informationen.

    #MainMenu {Margin: 0-padding: 0 -} # MainMenu- li {margin: 0-padding: 0-list-style: none; float: left;} # MainMenu- li a {display: block-margin: 0 1px 0 0 das Auffüllen: 4px 10px; width: 80px; Hintergrund: Schwarz-Farbe: Weiß-text-align: center -} # MainMenu- li a: hover {background: Grün -} # MainMenu- li: ul schweben {Sichtbarkeit: sichtbar -} # MainMenu ul {position: absolute Sichtbarkeit: hidden-margin: 0-padding: 0-Hintergrund: Grau-border: 1px solid weiß-width: 80px;} # MainMenu- ul a {position: relative-display: block-margin: 0 das Auffüllen: 5px 10px; width: 80px; text-align: left; Hintergrund: hellgrau-Farbe: Schwarz -} # MainMenu- ul a: Hover {background: veilchen}

    Wow, das ist eine Menge Code! Styles komplex werden kann, wie Sie versuchen, mehr mit ihnen zu tun. Deshalb sind viele Entwickler verlassen sich stark auf Drittanbieter-Bibliotheken und Tools. Der Versuch, mit allen, die Stil, Informationen selbst zu kommen ist zeitraubend.

    Die Art der Speisekarte ist leicht mit einem Werkzeug hergestellt wie CSS Menu Maker, Menucool.com, oder CSS3 Menu. Allerdings ist es wichtig, durch diese Übung mindestens einmal zu gehen, damit Sie wissen, wie die Dinge funktionieren.

    Die Stile beginnen mit der MainMenu, einer ungeordneten Liste (

      ) Element. Alles ist auf dieses Element verwiesen wird. Die MainMenu- besteht aus einer Anzahl von Listenelementen (
  21. ), Die die #MainMenu li Stil mit eingestellt. Sie wollen nicht die Listeneinträge wie eine Liste tatsächlich aussehen zu - man kann sie wie Menüs aussehen soll - so ist es wichtig, die list-style auf none zu setzen.

    Einstellen Schwimmer nach links wird dazu beitragen, das Menü auch ein professionelles Aussehen geben. Innerhalb jedes Listenelement ist ein Anker (), Die an dem auf die Position verweist der Benutzer nach Auswahl des Menüpunktes geht. Die #MainMenu li a Stil schafft die erforderliche Erscheinung, die das Element als Block enthält Anzeigen.

    Wenn der Benutzer mit der Maus über eine der MainMenu Artikel schwebt, die #MainMenu li a: Schaltet Hover-Stil den Eintrag grün.

    Die #MainMenu li: hover ul erfordert eine kleine Erklärung. Normalerweise hat das sekundäre Menü seine Sichtbarkeit auf versteckte gesetzt, so dass Sie es nicht sehen. Wenn ein Benutzer die Maus über einen Artikel MainMenu- Liste schwebt, möchten Sie das Untermenü angezeigt. Dieser Stil führt diese Aufgabe. Er schafft das Aussehen von Code ohne Code tatsächlich verwenden.

    Die Untermenüs erscheint vertikal unterhalb der horizontalen Hauptmenü. Um dies zu tun, setzt die #MainMenu ul Stil die Breite auf 80px, die erforderliche Größe eines einzelnen Menüeintrag zu halten. Diese Einstellung muss ein Stil, die Breite Einstellung für die #MainMenu ul entsprechen.

    Beachten Sie, dass diese zweite Ebene der Menüs hat seine Sichtbarkeit Eigenschaft auf versteckt gesetzt, weil Sie wollen es nicht sehen, bis der Benutzer die zugehörigen Hauptmenüeintrag klickt. Wie bei dem Hauptmenü, möchten Sie zu wissen, wann sie ein bestimmtes Element ausgewählt haben, so dass die #MainMenu ul a: Hover-Stil der Hintergrundwert zu Violet-Menü verändert.

  22. Speichern Sie die Datei als Navigation.CSS.

  23. Laden Sie das Beispiel Navigation.

    Sie sehen das Menü (Ihr Menü zunächst nichts ausgewählt haben und wird als schwarzer Balken am oberen Rand der Seite angezeigt).

    bild0.jpg

    Probieren Sie verschiedene Elemente auswählen. Das Beispiel verwendet die bestehende Website für jede der Verbindungen, aber wenn Sie möchten, können Sie mit anderen Links versuchen. einen Link klicken, werden Sie an die gewünschte Stelle nehmen.

    Der Punkt dieses Menü ist, dass Sie schon einige Elemente der Benutzeroberfläche erstellen können, die sie aussehen sind codiert, aber wirklich nicht, mit Hilfe von CSS. Diese CSS-only-Ansatz wird mit den meisten Browsern arbeiten, ohne den Benutzer zu fragen javascript aktiviert. Die meisten Browser unterstützen das Niveau der CSS erforderlich, um dieses Menü System funktioniert.

Ähnliche

Menü