Demo: Navigationsleisten
Vertikal
Navigationsleisten
easy-to-use Mit Navigation ist wichtig für jede Website.
Mit CSS können Sie langweilige HTML-Menüs in gut aussehende Navigationsleisten verwandeln.
Navigationsleiste = Linkliste
Eine Navigationsleiste muss Standard-HTML als Basis.
In unseren Beispielen werden wir die Navigationsleiste aus einer Standard-HTML-Liste zu erstellen.
Eine Navigationsleiste ist im Grunde eine Liste von Links, so dass die Verwendung von <ul> und <li> Elemente macht Sinn:
Beispiel
<ul>
<li><a href="default.html">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>
Versuch es selber " Nun wollen wir die Kugeln und die Ränder und Polsterung aus der Liste zu entfernen:
Erklärt Beispiel:
-
list-style-type: none;- Entfernt die Kugeln. Eine Navigationsleiste benötigt keine Liste Marker - Set
margin: 0;undpadding: 0;Browser Standardeinstellungen zu entfernen
Der Code in dem obigen Beispiel ist der Standardcode in den beiden vertikalen verwendet, und horizontale Navigationsleisten.
Vertikalen Navigationsleiste
Um eine vertikale Navigationsleiste erstellen, können Sie den Stil <a> Elemente innerhalb der Liste, zusätzlich zu den obigen Code:
Erklärt Beispiel:
-
display: block;- die Links als Blockelemente angezeigt macht den gesamten Link Bereich klickbare (nicht nur den Text), und es erlaubt uns , die angeben , width (und padding, margin, height , etc. , wenn Sie möchten) -
width: 60px;- Block - Elemente , um die volle Breite als Standard verfügbar sind oben. Wir wollen eine 60 Pixel Breite angeben
Sie können auch die Breite eingestellt <ul> , und die Breite entfernen <a> , da sie über die gesamte Breite verfügbar aufnehmen , wenn sie als Blockelemente angezeigt. Dadurch wird das gleiche Ergebnis wie unsere vorherigen Beispiel erzeugen:
Beispiel
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
} Versuch es selber " Vertikalen Navigationsleiste Beispiele
Erstellen eines einfachen vertikalen Navigationsleiste mit einem grauen Hintergrundfarbe und ändern Sie die Hintergrundfarbe der Links, wenn der Benutzer mit der Maus über sie bewegt:
Beispiel
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} Versuch es selber " Aktiv / Aktuelle Navigation Verbindungs
Fügen Sie einen "aktiven" Klasse auf den aktuellen Link der Benutzer weiß, welche Seite er / sie auf:
Mitte Links & Rand hinzufügen
In text-align:center auf <li> oder <a> die Links zu zentrieren.
Fügen Sie die border Eigenschaft auf <ul> fügen Sie einen Rahmen um den navbar. Wenn Sie auch Grenzen innerhalb der Navigationsleiste wollen, fügen Sie ein border-bottom für alle <li> Elemente, mit Ausnahme der letzten:
Beispiel
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} Versuch es selber " Voll Höhe feste vertikale Navbar
Erstellen Sie eine volle Höhe, "sticky" Seite Navigation:
Beispiel
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
} Versuch es selber " Hinweis: Dieses Beispiel nicht richtig auf mobilen Geräten funktionieren könnte.
Horizontale Navigationsleiste
Es gibt zwei Möglichkeiten, um eine horizontale Navigationsleiste zu erstellen. MitInline - oder Floating- Listeneinträge.
Inline-Listenelemente
Eine Möglichkeit , eine horizontale Navigationsleiste zu bauen ist es, die angeben <li> Elemente als Inline, zusätzlich zu dem "standard" Code oben:
Erklärt Beispiel:
-
display: inline;- standardmäßig <li> Elemente sind Blockelemente. Hier entfernen wir die Zeilenumbrüche vor und nach jedem Listeneintrag, so dass sie auf einer Zeile angezeigt werden
Schwimmdock Listenelemente
Eine weitere Möglichkeit , eine horizontale Navigationsleiste zu schaffen , ist es, die zu schweben <li> Elemente und ein Layout für die Navigations - Links angeben:
Beispiel
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
} Versuch es selber " Erklärt Beispiel:
-
float: left;- Verwendung Schwimmer Blockelemente gleiten nebeneinander bekommen -
display: block;- die Links als Blockelemente angezeigt macht den gesamten Link Bereich klickbare (nicht nur den Text), und es erlaubt uns , Polsterung zu spezifizieren (und height, width, margins , etc. , wenn Sie möchten) -
padding: 8px;- Da Block - Elemente über die gesamte Breite verfügbar einnehmen, können sie nicht nebeneinander schwimmen. Daher geben Sie etwas Padding, um sie gut aussehen -
background-color: #dddddd;hinzufügen grauen Hintergrund-Farbe zu jedem Element ein -
Tipp: Fügen Sie die Hintergrund-Farbe <ul> anstelle jedes <a> Element , wenn Sie ein voller Breite Hintergrundfarbe möchten:
Horizontale Navigationsleiste Beispiele
Erstellen eines einfachen horizontalen Navigationsleiste mit einem dunklen Hintergrundfarbe und ändern Sie die Hintergrundfarbe der Links, wenn der Benutzer mit der Maus über sie bewegt:
Beispiel
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
} Versuch es selber " Aktiv / Aktuelle Navigation Verbindungs
Fügen Sie einen "active" Klasse auf den aktuellen Link der Benutzer weiß , welche Seite er / sie auf:
Rechts-Align Verbindungen
Rechts-align Links durch die Listenelemente nach rechts schwimmend ( float:right; ):
Beispiel
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul> Versuch es selber " Border Divider
Fügen Sie den border-right - Eigenschaft auf <li> Link Teiler zu schaffen:
Beispiel
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
} Versuch es selber " Feste Navigationsleiste
Machen Sie die Navigationsleiste Aufenthalt am oberen oder den unteren Rand der Seite, auch wenn der Benutzer scrollt die Seite:
Hinweis: Diese Beispiele nicht richtig auf mobilen Geräten funktionieren könnte.
Grau Horizontal Navbar
Ein Beispiel für eine grau horizontale Navigationsleiste mit einer dünnen grauen Rand:
Beispiel
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Versuch es selber " 
Mehr Beispiele
Responsive Topnav
Wie CSS3 Media Queries zu verwenden, um eine ansprechende Top-Navigation zu erstellen.
Responsive Sidenav
Wie CSS3 Media Queries zu verwenden, um eine ansprechende Seite Navigation zu erstellen.
Dropdown Navbar
Wie ein Dropdown-Menü in einer Navigationsleiste hinzuzufügen.