Sistema de navegación por franjas con CSS

23/08/2007 -

En 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

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.

Descargar archivo » »

Algunas entradas relacionadas: