Latest web development tutorials

barra lateral Fundación

barra lateral de navegación

Fundación uso <ul class="side-nav"> "> para crear una barra lateral:

Ejemplos

<Ul class = "lado-nav ">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
<Li> <a href = "#"> Enlace 4 </ a> </ li>
</ Ul>

Trate »

enlace de activación con la línea divisoria

He hecho clic en el enlace <li> Utilice la .active clase identificada mediante .divider clase para agregar línea horizontal:

Ejemplos

<Ul class = "lado-nav ">
<Li class = "activa"> clase <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 = "#"> Link 3 </ a> </ li>
<Li> <a class = "a" href = "#"> Enlace 4 </ a> </ li>
</ Ul>

Trate »

rejilla de la barra lateral

Podemos utilizar el modo de diseño de cuadrícula para ajustar la barra de navegación lateral, ejemplos son los siguientes:

Ejemplos

<Div class = "fila">
<Div class = "medio-4 columnas" style = "background-color: # f1f1f1;">
<Ul class = "lado-nav ">
<Li class = "activa"> <a href = "#"> Inicio </ a> </ li>
<Li> <a href = "#"> aprender HTML </ a> </ li>
...
</ Ul>
</ Div>
<div class = "medio-8 columnas">
<H1> Side Nav </ h1 >
<P> Un texto .. </ p>
...
</ Div>
</ Div>

Trate »