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>
<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>
<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>
<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 »