Stiftung Sidebar
Sidebar-Navigation
Verwendung Foundation <ul class="side-nav">
"> eine Sidebar zu erstellen:
Beispiele
<Ul class = "side-nav ">
<Li> <a href = "#"> Verbindung 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
<Li> <a href = "#"> Link - 4 </ a> </ li>
</ Ul>
<Li> <a href = "#"> Verbindung 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
<Li> <a href = "#"> Link - 4 </ a> </ li>
</ Ul>
Versuchen »
Aktivierungslink mit der Trennlinie
Ich klickte auf den Link in <li>
Verwenden Sie die .active
Klasse identifiziert mit .divider
Klasse horizontalen Zeile hinzufügen:
Beispiele
<Ul class = "side-nav ">
<Li class = "aktiv"> <a class = "a" href = "#"> Verbindung 1 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 2 </ a> </ li>
<Li class = "Teiler"> </ li>
<Li> <a class = "a" href = "#"> Link 3 </ a> </ li>
<Li> <a class = "a" href = "#"> Link - 4 </ a> </ li>
</ Ul>
<Li class = "aktiv"> <a class = "a" href = "#"> Verbindung 1 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 2 </ a> </ li>
<Li class = "Teiler"> </ li>
<Li> <a class = "a" href = "#"> Link 3 </ a> </ li>
<Li> <a class = "a" href = "#"> Link - 4 </ a> </ li>
</ Ul>
Versuchen »
Grid Sidebar
Wir können das Raster Design-Modus verwenden, um die seitlichen Navigationsleiste zu setzen, Beispiele sind wie folgt:
Beispiele
<Div class = "Zeile">
<Div class = "Medium-4 Spalten" style = "background-color: # f1f1f1;">
<Ul class = "side-nav ">
<Li class = "aktiv"> <a href = "#"> Home </ a> </ li>
<Li> <a href = "#"> Lernen Sie HTML </ a> </ li>
...
</ Ul>
</ Div>
<Div class = "Medium-8 Spalten">
<H1> Side Nav </ h1 >
<P> Ein Text .. </ p>
...
</ Div>
</ Div>
<Div class = "Medium-4 Spalten" style = "background-color: # f1f1f1;">
<Ul class = "side-nav ">
<Li class = "aktiv"> <a href = "#"> Home </ a> </ li>
<Li> <a href = "#"> Lernen Sie HTML </ a> </ li>
...
</ Ul>
</ Div>
<Div class = "Medium-8 Spalten">
<H1> Side Nav </ h1 >
<P> Ein Text .. </ p>
...
</ Div>
</ Div>
Versuchen »