Vertikale CSS -Navigationsleiste
Vertikale Navigationsleiste
Um eine vertikale Navigationsleiste zu erstellen, können Sie die <a>-Elemente innerhalb der Liste zusätzlich zum Code von der vorherigen Seite formatieren:
Beispiel
li a
{
display: block;
width: 60px;
}
Beispiel erklärt:
display: block;- Das Anzeigen der Links als Blockelemente macht den gesamten Linkbereich anklickbar (nicht nur den Text) und ermöglicht es uns, die Breite (und Polsterung, Rand, Höhe usw., wenn Sie möchten) festzulegen.width: 60px;- Blockelemente nehmen standardmäßig die volle verfügbare Breite ein. Wir wollen eine Breite von 60 Pixel angeben
Sie können auch die Breite von <ul> festlegen und die Breite von <a> entfernen, da sie die gesamte verfügbare Breite einnehmen, wenn sie als Blockelemente angezeigt werden. Dies führt zum gleichen Ergebnis wie unser vorheriges Beispiel:
Beispiel
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
Beispiele für vertikale Navigationsleisten
Erstellen Sie eine einfache vertikale Navigationsleiste mit grauer 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;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
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;
color: white;
}
Links zentrieren und Rahmen hinzufügen
Fügen Sie text-align:centerzu <li> oder <a> hinzu, um die Links zu zentrieren.
Fügen Sie die borderEigenschaft zu <ul> hinzu und fügen Sie einen Rahmen um die Navigationsleiste hinzu. Wenn Sie auch Rahmen innerhalb der Navigationsleiste haben möchten, fügen Sie border-bottomallen <li>-Elementen außer dem letzten ein hinzu:
Beispiel
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Feste vertikale Navigationsleiste in voller Höhe
Erstellen Sie eine "klebrige" Seitennavigation in voller Höhe:
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 */
}
Hinweis: Dieses Beispiel funktioniert möglicherweise nicht richtig auf Mobilgeräten.