Sistema de navegación por franjas con CSS

Comentarios: 0
Tags: , , ,
Fecha: 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:

¡Gracias por dejar tu opinión! Por favor procura que tu comentarios sean apropiados al tema tratado en la entrada; que no sean spam, u ofensivos, de otro modo, serán eliminados.

Si deseas realizar algún comentario, crítica o sugerencia sobre la propia web o deseas contactar conmigo lo puedes hacer a través de la siguiente dirección de correo: webintenta@webintenta.com

El hombre nunca sabe de lo que es capaz hasta que lo intenta.Dickens, Charles
Pixer.us

Pixer.us es un servicio web que nos ofrece opciones sencillas de edición de imágenes, como modificar el tamaño o recortarlas. También podremos añadirle unos cuantos efectos básicos. Para utilizar este servicio tan sólo tenemos que subir nuestra imágen haciendo click en el botón de “Examinar” y luego en el de “Upload & Edit”. Una vez hemos realizado las modificaciones tendremos la opción de guardar la imagen en alguno de los siguientes formatos: JPEG, GIF, BMP o PNG.

7 Poderosos carruseles de imágenes para diseñadores

Este post es una colección de algunos de los mejores carruseles de imágenes y contenido que podemos utilizar para nuestros proyectos web. El listado incluye Agile Carousel, YUI Carousel, JCarousel, iCarousel (jQuery + MooTools) y un tutorial acerca de cómo implementar un carrusel como los de Flickr utilizando Prototype-UI.

Listado de editores de PHP

Listado que aglutina la mayoría de editores de PHP que existen en la actualidad. El listado está dividido en editores gratuitos -con una subdivisión por sistema operativo- y editores comerciales. Interesante enlace.

50 lecciones acerca de teoría del diseño

Desde Psdtuts+ nos ofrecen 50 lecciones acerca de teoría del diseño gráfico. Si bien muchas veces nos enfocamos en el cómo de las cosas, cómo conseguir un efecto, cómo realizar una retícula en css,... también resulta muy importante entender el "por qué". Lecciones acerca de tipografía, psicología del color, composición, etc. Las lecciones están en inglés.

BonkEnc extrae, codifica y convierte archivos de audio

BonkEnc es una utilidad para extraer las pistas de audio de los CDs, codificar y convertir los archivos de audio a múltiples formatos. Es capaz de generar archivos en formato MP3, MP4 /M4A, Ogg Vorbis, AAC, y FLAC. Y dispone de su propio códec de sonido, Bonk. Además es compatible con CDDB (Compact Disc Database) y CDText

Times Reader: el New York Times en Adobe AIR

El prestigioso New York Times ha lanzado una aplicación, llamada Times Reader, basada en Adobe AIR, que permite leer las noticias de un modo más parecido a lo que sería un periódico en papel. Parece que la crisis de los medios escritos hace que se abran a nuevos modelos de negocio.

Appetizer

Appetizer es una aplicación gratuita para Windows que funciona como lanzador de aplicaciones. Permite organizar los accesos directos y carpetas que más a menudo utilizemos en una cómoda barra o "dock" . Entre sus características cabe destacar que tiene soporte para plugins; para pieles; teclas de acceso rápido; apoyo a iconos personalizados; etc. También es muy interesante mencionar que el programa posee una versión portable del mismo.

How To Create A Great Web Design CV and Resume?

Aprovechando que están cayendo chuzos de punta en el mundo laboral, en Smashing Magazine se han marcado un muy interesante artículo sobre como crear un buen currículum vitae.

13 trucos para Google Reader

Una interesante recopilación de recursos y recetas para sacar un mayor partido a Google Reader: atajos de teclado, uso de filtros, utilizar las notas,...