Vertikalen Navigationsleiste
Mit Seiten Navigation, haben Sie mehrere Möglichkeiten:
- Immer zeigen den Navigationsbereich auf der linken Seite des Seiteninhalts.
- Verwenden Sie einen zusammenlegbaren, "vollautomatische" responsive Seite Navigation.
- Öffnen Sie den Navigationsbereich, den linken Teil des Inhalts der Seite versteckt.
- Öffnen Sie den Navigationsbereich versteckt alle Seiteninhalt.
- Verschieben Sie den Seiteninhalt auf der rechten Seite, wenn das Navigationsfenster zu öffnen.
Beispiel: Anzeige immer auf der Seite Navigation
<nav class="w3-sidenav w3-white" style="width:25%">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
<a href="#">Link 4</a>
</nav>
<div style="margin-left:25%">
... page content ...
</div> Versuch es selber " Klapp-Responsive Sidenav
<nav class="w3-sidenav w3-collapse w3-white" style="width:200px">
<a href="#" onclick="w3_close()" class="w3-closenav w3-hide-large">Close
×</a>
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</nav>
<div class="w3-main" style="margin-left:200px">
<span class="w3-opennav w3-hide-large" onclick="w3_open()">☰</span>
... page content ...
</div>
<script>
function w3_open()
{
document.getElementsByClassName(" w3-sidenav ")[ 0 ].style.display
= " block ";
}
function w3_close() {
document.getElementsByClassName(" w3-sidenav ")[ 0 ].style.display = " none ";
}
</script> Versuch es selber " Öffnen Sie den Navigationsbereich Ausblenden eines Teils des Inhalts
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Versuch es selber " Öffnen Sie den Navigationsbereich ausblenden Der gesamte Inhalt
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.width
= "100%";
document.getElementsByClassName("w3-sidenav")[0].style.display
= "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Versuch es selber " Verschieben Sie den Inhalt nach rechts
function w3_open() {
document.getElementById("main").style.marginLeft
= "25%";
document.getElementsByClassName("w3-sidenav")[0].style.width
= "25%";
document.getElementsByClassName("w3-sidenav")[0].style.display
= "block";
document.getElementsByClassName("w3-opennav")[0].style.display
= 'none';
}
function w3_close() {
document.getElementById("main").style.marginLeft
= "0%";
document.getElementsByClassName("w3-sidenav")[0].style.display
= "none";
document.getElementsByClassName("w3-opennav")[0].style.display
= "inline-block";
} Versuch es selber " Styling der seitlichen Navigations
Fügen Sie die w3- Farbklasse auf die w3-sidenav die Hintergrundfarbe zu ändern. Wenn Sie einen aktiven / Strom Link wollen, wissen zu lassen, der Benutzer , welche Seite er / sie auf, wie auch die w3- Farbklasse zu einem der Links hinzufügen:
Beispiel
<nav class="w3-sidenav w3-light-grey">
<a class="w3-green" href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
</nav> Versuch es selber " Angrenzende Seiten Navigation
Verwenden Sie die w3-Grenze Klasse einen Rahmen um den sidenav hinzuzufügen:
Beispiel
<nav class="w3-sidenav w3-border">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
</nav> Versuch es selber " Fügen Sie die w3-border-bottom - Klasse zu den Links Link Teiler zu schaffen:
Beispiel
<nav class="w3-sidenav w3-border">
<a class="w3-border-bottom" href="#">Link 1</a>
<a
class="w3-border-bottom" href="#">Link 2</a>
<a
href="#">Link 3</a>
</nav> Versuch es selber " Verwenden Sie die w3-Card - Klasse die sidenav als Karte angezeigt werden :
Beispiel
<nav class="w3-sidenav w3-card-8">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
</nav> Versuch es selber " Hoverable Verbindungen
Wenn Sie die Maus über die Links in der sidenav, wird die Hintergrundfarbe zu grau ändern.
Wenn Sie eine andere Hintergrundfarbe auf schweben wollen, verwenden Sie einen der w3-Hover-Farbklassen:
Beispiel
<nav class="w3-sidenav">
<a class="w3-hover-black" href="#">Link 1</a>
<a
class="w3-hover-green" href="#">Link 2</a>
<a
class="w3-hover-blue" href="#">Link 3</a>
<a class="w3-hover-red" href="#">Link
4</a>
</nav> Versuch es selber " Sie können den Standard Hover - Effekt mit der w3-Hover-none Klasse auszuschalten. Dies wird häufig verwendet, wenn Sie nur die Textfarbe hervorgehoben werden soll (und nicht die Hintergrundfarbe) auf schweben:
Beispiel
<nav class="w3-sidenav">
<a class="w3-hover-none w3-hover-text-grey" href="#">Link 1</a>
<a
class="w3-hover-none w3-hover-text-green" href="#">Link 2</a>
<a
class="w3-hover-none w3-hover-text-teal" href="#">Link 3</a>
<a class="w3-hover-none w3-hover-text-orange" href="#">Link
4</a>
</nav> Versuch es selber " Side Navigation Größen
Erhöhte font-size (w3-large etc.):
Erhöhte Polsterung (w3-Polsterung, etc.):
Beispiel
<nav class="w3-sidenav w3-large">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</nav> Versuch es selber " Side Navigation mit Icons
Beispiel
<nav class="w3-sidenav w3-black" style="width:70px">
<a href="#"><i
class="fa fa-home w3-xxlarge"></i></a>
<a href="#"><i class="fa
fa-search w3-xxlarge"></i></a>
<a href="#"><i class="fa fa-envelope
w3-xxlarge"></i></a>
<a href="#"><i class="fa fa-globe
w3-xxlarge"></i></a>
</nav> Versuch es selber " Side Navigation mit Dropdown
Beispiel
<nav class="w3-sidenav w3-light-grey">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<div
class="w3-dropdown-hover">
<a href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div
class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link
3</a>
</nav> Versuch es selber " Tipp: Wenn das Dropdown - Menü "offen" ist, das Drop - Down - Link erhält eine graue Hintergrundfarbe , um anzuzeigen , dass er aktiv ist. So überschreiben Sie diese, fügen Sie ein w3-Hover-Farbklasse sowohl für die "Dropdown" <li> und <a>.
Side Navigation mit Akkordeon
Beispiel
<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">Accordion</a>
<div
id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="w3-dropdown-click">
<a onclick="myDropFunc()" href="#">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>Animierte Sidenav
Verwenden Sie eine der w3-animate- Klassen zu verblassen, Zoom oder Folie in Seitennavigation:
Sidenav Overlay
Die w3-Overlay - Klasse kann verwendet werden , um ein Überlagerungseffekt zu erzeugen , wenn die sidenav öffnen. Die w3-Overlay-Klasse fügt einen schwarzen Hintergrund mit einer 50% Opazität auf die "Seiteninhalt" - dieser Effekt wird "Highlight" in der Navigationsleiste.
Beispiel
<!-- Sidenav -->
<nav class="w3-sidenav w3-white w3-animate-left"
style="display:none;z-index:4">
<a href="javascript:void(0)"
onclick="w3_close()" class="w3-closenav">Close</a>
<a href="#">Link
1</a>
<a href="#">Link 2</a>
</nav>
<!-- Overlay -->
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer"></div>
<!-- Page content -->
<div class="w3-container">
<span
class="w3-opennav" onclick="w3_open()">☰</span>
</div>
<!-- JS to
open and close sidenav with overlay effect -->
<script>
function
w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display
= "block";
document.getElementsByClassName("w3-overlay")[0].style.display
= "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
document.getElementsByClassName("w3-overlay")[0].style.display = "none";
}
</script> Versuch es selber " Sidenav Inhalt
Addieren Sie, was Sie in der seitlichen Navigations mag:
Beispiel
<nav class="w3-sidenav w3-light-grey" style="width:50%">
<div
class="w3-container w3-dark-grey">
<h4>Menu</h4>
</div>
<img src="img_fjords.jpg">
<a class="w3-red" href="#">Home</a>
<a href="#">Projects
<span
class="w3-tag w3-red w3-round w3-right">8</span>
</a>
<a href="#">About</a>
<a href="#">Contact</a>
<div class="w3-container">
<div class="w3-border w3-round w3-padding w3-blue-grey">
<span class="w3-closebtn">x</span>
<p>Lorem
ipsum box...</p>
</div>
</div>
</nav> Versuch es selber "