Latest web development tutorials

CSS Navigationsleiste

Beispiel: Navigationsleiste

Navigationsleiste

Skilled Verwendung Navigation für jede Website ist sehr wichtig.

Mit CSS können Sie in eine schöne Navigationsleiste umwandeln statt langweiligen HTML-Menüs.

Navigation Links list =

Als Standard ist HTML-basierte Navigationsleiste ein Muss

. In unserem Beispiel werden wir eine Standard-HTML-Liste Navigationsleiste erstellen.

Die Navigationsleiste ist im Grunde eine Liste von Links, so verwenden <ul> und <li> Elemente sind sehr sinnvoll:

Beispiele

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

Versuchen »

Nun lassen Sie uns entfernen Margen und Polsterung aus der Liste:

Beispiele

ul
{
list-style-type:none;
margin:0;
padding:0;
}

Versuchen »

Beispiele der Analyse:

  • list-style-type: none - bevor die Liste der kleinen Fahnen zu entfernen. Eine Navigationsleiste benötigt keine Liste Marker
  • Entfernen Sie die Standardeinstellungen des Browsers Margen und Polsterung auf 0 gesetzt

Das obige Beispiel-Code ist in den Standard vertikalen und horizontalen Navigationsleiste Codes verwendet.

Vertikalen Navigationsleiste

Der obige Code, brauchen wir nur <a> Stilelemente, eine vertikale Navigationsleiste Gründung:

Beispiele

a
{
display:block;
width:60px;
}

Versuchen »

Das Beispiel zeigt:

  • Anzeige: Block - Anzeige verbindet Elementblock, so dass die Gesamtheit einen anklickbaren Link Bereich wird (nicht nur Text), die uns die Breite angeben können,
  • Breite: 60px - Block-Elemente standardmäßig ist die maximale Breite. Wir wollen eine Breite von 60 Pixel zu spezifizieren

Tipp: Siehe Beispiel eines voll Stil vertikalen Navigationsleiste .

Hinweis: Stellen Sie sicher , dass die Breite des Elements in der vertikalen Navigationsleiste <a> angeben 's.Wenn Sie die Breite nicht angeben, kann IE6 zu unerwarteten Ergebnissen führen.

Horizontale Navigationsleiste

Es gibt zwei Möglichkeiten, um eine horizontale Navigationsleiste zu erstellen. Verwenden SieInline - oder Floating- Listeneinträge.

Beide Verfahren sind in Ordnung, aber wenn man auf die gleiche Größe verknüpfen möchten, müssen Sie die Floating-Methode verwenden.

Inline-Listenelemente

Eine eine horizontale Navigationsleiste zu bauen, ist zu spezifizieren

  • Element, der obige Code ist der Standard eingebaut:

    Beispiele

    li
    {
    display:inline;
    }

    Versuchen »

    Analyse Beispiele:

    • display: inline; - standardmäßig <li> -Element ist ein Blockelement. Hier entfernen wir Zeilenumbrüche vor und nach jedem Listenelement die Zeile angezeigt werden soll.

    Tipp: Siehe Beispiel eines voll Stil horizontalen Navigationsleiste .

    Schwimmdock Listenelemente

    In dem obigen Beispiel Verbindungen weisen unterschiedliche Breiten auf.

    Für alle Links gleicher Breite, float <li> -Element und die Breite des Elements <a> angeben:

    Beispiele

    li
    {
    float:left;
    }
    a
    {
    display:block;
    width:60px;
    }

    Versuchen »

    Analyse Beispiele:

    • float: left - verwenden, um die Schieberelement gleitet nebeneinander
    • Anzeige: Block - Anzeige verbindet Elementblock, so dass die Gesamtheit einen anklickbaren Link Bereich wird (nicht nur Text), die uns die Breite angeben können,
    • Breite: 60px - Block-Elemente standardmäßig ist die maximale Breite. Wir wollen eine Breite von 60 Pixel zu spezifizieren

    Tipp: Siehe Beispiel eines voll Stil horizontalen Navigationsleiste. .