Fondazione sidebar
navigazione Sidebar
uso Fondazione <ul class="side-nav">
"> per creare una barra laterale:
Esempi
<Ul class = "side-nav ">
<Li> <a href = "#"> collegamento 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 = "#"> collegamento 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>
Prova »
Il link di attivazione con la linea di demarcazione
Ho cliccato sul link in <li>
Utilizzare la .active
classe identificata utilizzando .divider
classe per aggiungere linea orizzontale:
Esempi
<Ul class = "side-nav ">
<Li class = "attivo"> <a class = href = "a" "#"> collegamento 1 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 2 </ a> </ li>
<Li class = "divider"> </ li>
<Li> <a class = "a" href = "#"> Link 3 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 4 </ a> </ li>
</ Ul>
<Li class = "attivo"> <a class = href = "a" "#"> collegamento 1 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 2 </ a> </ li>
<Li class = "divider"> </ li>
<Li> <a class = "a" href = "#"> Link 3 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 4 </ a> </ li>
</ Ul>
Prova »
Griglia sidebar
Siamo in grado di utilizzare la modalità di progettazione di rete per impostare la barra di navigazione laterale, esempi sono i seguenti:
Esempi
<Div class = "riga">
<Div class = "medio-4 colonne" style = "background-color: # f1f1f1;">
<Ul class = "side-nav ">
<Li class = "attivo"> <a href = "#"> casa </ a> </ li>
<Li> <a href = "#"> Learn HTML </ a> </ li>
...
</ Ul>
</ Div>
<div class = "medio-8 colonne">
<H1> Nav laterale </ h1 >
<P> Del testo .. </ p>
...
</ Div>
</ Div>
<Div class = "medio-4 colonne" style = "background-color: # f1f1f1;">
<Ul class = "side-nav ">
<Li class = "attivo"> <a href = "#"> casa </ a> </ li>
<Li> <a href = "#"> Learn HTML </ a> </ li>
...
</ Ul>
</ Div>
<div class = "medio-8 colonne">
<H1> Nav laterale </ h1 >
<P> Del testo .. </ p>
...
</ Div>
</ Div>
Prova »