Latest web development tutorials

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>

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>

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>

Prova »