Horizontale CSS -Navigationsleiste
Horizontale Navigationsleiste
Es gibt zwei Möglichkeiten, eine horizontale Navigationsleiste zu erstellen. Verwenden von Inline- oder Floating - Listenelementen.
Inline-Listenelemente
Eine Möglichkeit, eine horizontale Navigationsleiste zu erstellen, besteht darin, die <li> -Elemente zusätzlich zum "Standard" -Code von der vorherigen Seite als Inline anzugeben:
Beispiel
li
{
display: inline;
}
Beispiel erklärt:
display: inline;- Standardmäßig sind <li>-Elemente Blockelemente. Hier entfernen wir die Zeilenumbrüche vor und nach jedem Listenelement, um sie in einer Zeile anzuzeigen
Schwebende Listenelemente
Eine andere Möglichkeit, eine horizontale Navigationsleiste zu erstellen, besteht darin, die <li>-Elemente zu schweben und ein Layout für die Navigationslinks festzulegen:
Beispiel
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Beispiel erklärt:
float: left;- Verwenden Sie Float, um Blockelemente nebeneinander schweben zu lassendisplay: block;- Ermöglicht uns die Angabe der Polsterung (und Höhe, Breite, Ränder usw., wenn Sie möchten)padding: 8px;- Geben Sie zwischen jedem <a>-Element etwas Abstand an, damit sie gut aussehenbackground-color: #dddddd;- Fügen Sie jedem <a>-Element eine graue Hintergrundfarbe hinzu
Tipp: Fügen Sie die Hintergrundfarbe zu <ul> anstelle jedes <a>-Elements hinzu, wenn Sie eine Hintergrundfarbe in voller Breite wünschen:
Beispiel
ul
{
background-color: #dddddd;
}
Beispiele für horizontale Navigationsleisten
Erstellen Sie eine einfache horizontale Navigationsleiste mit dunkler Hintergrundfarbe und ändern Sie die Hintergrundfarbe der Links, wenn der Benutzer die Maus darüber 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;
}
Aktiver/Aktueller Navigationslink
Fügen Sie dem aktuellen Link eine "aktive" Klasse hinzu, um dem Benutzer mitzuteilen, auf welcher Seite er sich befindet:
Beispiel
.active {
background-color: #04AA6D;
}
Rechtsbündige Links
Richten Sie Links rechtsbündig aus, indem Sie die Listenelemente nach rechts verschieben ( 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>
Grenzteiler
Fügen Sie die border-rightEigenschaft zu <li> hinzu, um Linkteiler zu erstellen:
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;
}
Feste Navigationsleiste
Sorgen Sie dafür, dass die Navigationsleiste oben oder unten auf der Seite bleibt, auch wenn der Benutzer auf der Seite scrollt:
Festes Oberteil
ul {
position: fixed;
top: 0;
width: 100%;
}
Fester Boden
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Hinweis: Feste Position funktioniert möglicherweise nicht richtig auf Mobilgeräten.
Graue horizontale Navigationsleiste
Ein Beispiel für eine graue horizontale Navigationsleiste mit einem dünnen grauen Rand:
Beispiel
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Klebrige Navigationsleiste
Zu <ul> hinzufügen position: sticky;, um eine klebrige Navigationsleiste zu erstellen.
Ein Sticky-Element wechselt je nach Bildlaufposition zwischen relativ und fest. Es wird relativ positioniert, bis eine bestimmte Versatzposition im Ansichtsfenster erreicht wird - dann "klebt" es an Ort und Stelle (wie position:fixed).
Beispiel
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Hinweis: Internet Explorer unterstützt keine Sticky-Positionierung. Safari erfordert ein -webkit- Präfix (siehe Beispiel oben). Sie müssen auch mindestens eines von , oder angeben top, damit rightdie Sticky-Positionierung funktioniert.bottomleft
Mehr Beispiele
Reaktionsschnelles Topnav
So verwenden Sie CSS-Medienabfragen, um eine reaktionsschnelle Top-Navigation zu erstellen.
Reaktionsschnelles Sidenav
So verwenden Sie CSS-Medienabfragen, um eine responsive Seitennavigation zu erstellen.
Dropdown-Navigationsleiste
So fügen Sie ein Dropdown-Menü in einer Navigationsleiste hinzu.
Schon mal von W3Schools Spaces gehört ? Hier können Sie Ihre Website von Grund auf neu erstellen oder eine Vorlage verwenden und kostenlos hosten.
Kostenlos starten ❯* Keine Kreditkarte benötigt