Sistema de navegaci贸n por franjas con CSS
0 COMENTARIOS - Publicado hace 31 meses - Clasificado en: CSS, TUTORIALES, TIPS, SNIPPETSEn el artículo "A Stripe of List Style Inspiration" muestran como, únicamente con CSS, se pueden realizar estructuras de navegación complejas a partir de listas. En su caso han realizado un sistema de navegación horizontal, con franjas que se expanden para mostrar el contenido de las mismas. Un sistema de navegación muy útil para enlazar a distintas secciones y crear explicaciones sobre lo que se va a encontrar el usuario dentro de cada una de las secciones.
El ejemplo que muestro a continuación está basado en el anteriormente citado artículo, pero creo que es interesante porque se implementa la utilización de imágenes dentro de las franjas -cosa que creo muy útil para un sistema de navegación de este tipo-. También muestra de una forma más clara el código empleado, así como la posibilidad de descargar un fichero con el mismo. CSS
ul.franjas {
width:485px;
height:200px;
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
}
ul.franjas li {
display:inline;
margin:0;
padding:0;
}
ul.franjas li a {
display:block;
height:200px;
width:30px;
border-right:1px solid #f6f6f6;
text-align:justify;
float:left;
outline:none;
text-decoration:none;
}
ul.franjas li a b {
display:block;
font-size:11px;
text-transform:uppercase;
margin-bottom:10px;
}
a.s1 {background-color:#a0a0a0; color:#FFF;}
a.s2 {background-color:#868645; color:#FFF;}
a.s3 {background-color:#ddbd58; color:#FFF;}
a.s4 {background-color:#dd904e; color:#FFF;}
a.s5 {background-color:#dd6e45; color:#FFF;}
ul.franjas li a span {
display:none;
padding:20px;
text-align:justify;}
ul.franjas li a:hover {
width:350px;}
ul.franjas li a:hover span {
display:block;}
ul.franjas img {
float: left;
margin-right:15px;
margin-bottom:60px;
border:6px solid F2F2F2;
}
HTML
<ul class="franjas">
<li>
<a href="#" class="s1"><span>
<img src="http://www.webintenta.com/franjas1.jpg">
<b>Enlace 1</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
</span></a></li>
<li>
<a href="#" class="s2"><span>
<img src="http://www.webintenta.com/franjas2.jpg">
<b>Enlace 2</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
</span></a></li>
<li>
<a href="#" class="s3"><span>
<img src="http://www.webintenta.com/franjas3.jpg">
<b>Enlace 3</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
</span></a></li>
<li>
<a href="#" class="s4"><span>
<img src="http://www.webintenta.com/franjas4.jpg">
<b>Enlace 4</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
</span></a></li>
<li>
<a href="#" class="s5"><span>
<img src="http://www.webintenta.com/franjas5.jpg">
<b>Enlace 5</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
</span></a></li>
</ul>
Resultado
-
Enlace 1Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
-
Enlace 2Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
-
Enlace 3Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
-
Enlace 4Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
-
Enlace 5Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
Creo que, para aquellos que tengan algo de experiencia trabajando con CSS, la personalización del sistema de navegación es bastante evidente. Podeis descargar también un fichero con el ejemplo en un fichero .html.
Algunas entradas relacionadas:
- CSS en Flash
- "Box Model Hack" del gui脙鲁n
- Cambiar propiedades CSS con JQuery
- A帽adir notas en im谩genes con CSS
- Listas con rollover
- Crear cajas de mensajes con CSS y jQuery
- Crear un style switcher o alternador de estilos
También te puede interesar:
| El iPad nominado a los Fiasco Awards | 130 variables del algoritmo de Google | Webshare: explorador de archivos en AJAX y PHP para tu servidor FTP | code.flickr: la comunidad de desarrolladores de Flickr | Cómo crear un sitio de desplazamiento horizontal |





















dise帽o web valencia en 500 iconos gratuitos para tus aplicaciones web



