Latest web development tutorials

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>

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>

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>

Versuchen »