Wie ein CSS-Button-Menü erstellen (Teil 1)

Zurück ◈ Weiter

Einleitung: Warum CSS-Tasten verwenden?

In diesem Tutorial Serie, werde ich erklären, wie ich ein einfaches Menü erstellen eine Liste von Links und CSS. Ich werde die Grundlagen in diesem ersten Teil abdecken, und erweitern Sie dann das Menü mit fortgeschrittenen Tricks in den nächsten paar Teilen.

Schritt 1: Erstellen der Liste von Links mit HTML

In diesem Tutorial werde ich eine unsortierte Liste verwenden (

    ) Mit einer Anzahl von Listenelementen (
  • ) Regelmäßig Text-Links enthält. Die grundlegende HTML für diesen ersten Schritt ist ziemlich einfach, also werde ich es einfach schreiben:

    Die Liste wurde die ID =“avmenu“ gegeben, die ich CSS für die Liste und alles anwenden kann, dass das Listenelement enthält - in diesem Fall die Listenelemente und die Links. Ich habe auch eine class =“Strom“ auf dem ersten Listenelement, da ich die aktuelle Seite möchte einen bestimmten Stil haben den Betrachter des Menüs zu zeigen, die Seite, die aktuell angezeigt wird.

    Schritt 2: die grundlegenden Stile Erstellen CSS

    Mit der HTML-Liste erstellt, ist es Zeit, dem Web-Browser zu sagen, wie es angezeigt werden soll. Ich beginne die Stile für ein extrem einfaches horizontales Menü mit der Definition, nur einen Ausgangspunkt zu erhalten:

    Das Ergebnis sieht nicht sehr aufregend, aber die Liste der Links beginnt bereits wie ein Button-Menü zu suchen. Dies ist, was das Menü wie an dieser Stelle aussieht:

    Schritt 3: Stile für derzeit aktiven Link Hinzufügen und Hervorhebung Tasten auf Mouseover

    Wie bereits erwähnt, mag ich die gerade aktive Taste ein wenig abheben machen, und ich möchte auch einen Highlight-Effekt zeigen, wenn eine Schaltfläche mit dem Mauszeiger schwebte wird. Beide Ergänzungen wird es einfacher, den richtigen Link zu finden auf klicken, da sie als visuelle Antwort arbeiten, dass der Betrachter auf dem richtigen Link verweist. Dies ist der Code, den ich für diese beiden Ergänzungen hinzufügen:

    In diesem Beispiel habe ich eine Datei mit dem Namen part1.html erstellt, wo ich die CSS und die HTML zusammen in der gleichen Datei abgelegt haben. In meinen Vorlagen, lege ich immer CSS in einer externen CSS-Datei - und ich werde tun, dass, sobald der Code für das letzte Menü erstellt wird. Aber im ganzen Tutorial Serie, werde ich die CSS und HTML zusammen halten es einfacher zu machen, die Schritte zu folgen und sehen, wie die Änderungen im Code das Menü beeinflussen.

    Schritt 4: Überprüfen Sie die Ergebnisse im Web-Browser

    Ich habe die Datei Ich habe hier erstellt hochgeladen: part1.html. so können Sie das Menü sehen leben, wie es an diesem Punkt sieht. Link wird in einem neuen Tab / Fenster öffnen.

    Für den nächsten Teil werde ich eine part2.html schaffen - und so weiter, so lange wie das Tutorial läuft. Wie am Anfang der Post erwähnt, würde ich mich freuen, Vorschläge zu bekommen, was das Menü aussehen soll. Ich werde auch ein vertikales Menü machen und möglicherweise ein Drop-Down-Menü zu, wenn jemand zu sehen, es interessiert. Allgemeines Feedback, Fragen und Ideen sind auch sehr willkommen.

    Kommen im nächsten Teil: Es wird eine line-by-line Beschreibung des CSS und das Hinzufügen von mehr visuellen Effekten, Farben und Stilen ...

    In Verbindung stehende Artikel

Zurück ◈ Weiter