Pedir presupuesto

Bonito Menu Css para lista de iconos

Este post es una traducción de un post que han escrito en Woork, un estupendo Blog que nunca me cansaré de alabarlo.

Se trata de un excelente menú con CSS basado en una lista de lectores de Feeds.

En principio pone a nuestra disposición los ficheros para descargarlos en nuestro ordenador.

Descargar Código

Paso 1: Código HTML

Creamos un <div> con el id=rss-menu y añadimos una cabecera usando la etiqueta <h2>, además de una lista desordenada usando <li>

[html]

 

Mis Feeds

[/html]

Como puedes ver en el código anterior, cada enlace de lector de feed está dentro de un <li>
Se ha diseñado y usado un icono de fondo por cada elemento (usando CSS), añadiendo una pequeña descripción. (ex. “Añadir a Netvibes”).

Paso 2. Código CSS

Se ha usado una clase CSS por cada icono de feed:

[css].feed-yahoo{
background:url(pic/feed-yahoo.png) no-repeat;
}
.feed-newsgator{
background:url(pic/feed-newsgator.png) no-repeat;
}
.feed-netvibes{
background:url(pic/feed-netvibes.png) no-repeat;
}
.feed-bloglines{
background:url(pic/feed-bloglines.png) no-repeat;
}
.feed-xml{
background:url(pic/feed-xml.png) no-repeat;
}
.feed-google{
background:url(pic/feed-google.png) no-repeat;
}[/css]

Descarga el fuente del código completo de CSS.

Paso 3. Mostrar/Ocultar Menu con Javascript

Puedes añadir una función Javascript para mostrar/ocultar el menú en tu página añadiendo un simple código Javascript en la cabecera

[js]function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer==»none»){
document.getElementById(layer).style.display=»block»;
} else {
document.getElementById(layer).style.display=»none»;
}
}[/js]

Este código toma como input el parámetro que es el ID de la capa que quieres mostrar/ocultar (en este caso rss-menu). Asi que creamos un botón que haga esta función:

[html]Subscribe My Feed[/html]

Si quieres que el menu se muestre por encima del contenido de tu página tienes que poner el atributo “position” a Absolute.

Eso es todo….

Via: Woork

¿Te ha gustado?, Comparte!!

2 comentarios

  1. Muy bueno el tutorial, me ha sacado de un apuro, no encontraba como posicionar los íconos junto a la descripción :P…

    Gracias por el aporte, en verdad se agradece…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es