Latest web development tutorials

Fundação barra lateral

navegação da barra lateral

uso Foundation <ul class="side-nav"> "> para criar uma barra lateral:

Exemplos

<Class Ul = "side-nav ">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> ligação 3 </ a> </ li>
<Li> <a href = "#"> Fazer a ligação 4 </ a> </ li>
</ Ul>

tente »

link de ativação com a linha divisória

Eu cliquei no link <li> Use o .active classe identificada usando .divider classe para adicionar uma linha horizontal:

Exemplos

<Class Ul = "side-nav ">
<LI class = "ativo"> class = <a href = "a" "#"> Link 1 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 2 </ a> </ li>
<LI class = "divisor"> </ li>
<Li> <a class = "a" href = "#"> ligação 3 </ a> </ li>
<Li> <a class = "a" href = "#"> Fazer a ligação 4 </ a> </ li>
</ Ul>

tente »

barra lateral grade

Podemos usar o modo de estrutura de grade para definir a barra de navegação lateral, os exemplos são os seguintes:

Exemplos

<Div class = "linha">
<Div class = "média-4 colunas" style = "background-color: # f1f1f1;">
<Class Ul = "side-nav ">
<LI class = "ativo"> <a href = "#"> Home </ a> </ li>
<Li> <a href = "#"> Saiba HTML </ a> </ li>
...
</ Ul>
</ Div>
<div class = "média-8 colunas">
<H1> Side Nav </ h1 >
<P> Algum texto .. </ p>
...
</ Div>
</ Div>

tente »