Pure CSS Menu: Generador de menús desplegables sin javascript
Publicado por Claudia en enero 27, 2010
Jebú me comentaba sobre Pure CSS Menu, un sitio para crear menús desplegables (drop down) únicamente con CSS, y con la misma técnica usada por Janko Jovanovic.
Aunque el sitio está en inglés, es intuitivo y simple de usar, especialmente para quienes tienen pocos conocimientos de CSS y HTML. Puedes elegir una plantilla, cambiar los bordes, colores, estilo de fuente, configurar enlaces con pocos clicks y descargar luego el paquete zip hacia tu computador.
Cómo instalar un menú (en Blogger)
El fichero “purecssmenu-com.zip” contiene un archivo HTML y una carpeta con imágenes. Su intalación no es complicada:
1. Abrir el archivo purecssmenu.html. Éste se abre en una nueva pestaña de tu navegador.
2. Una vez abierta la pestaña, hacer click sobre ella con el botón derecho de tu mouse, y seleccionar la opción “Ver código fuente de la página“. Esos son los correspondientes códigos a ser pegados en la plantilla.
3. El código CSS comprendido entre las etiquetas <style> y </style> (excluidas éstas), debe ser pegado en la Edición de HTML de la plantilla, justo antes de ]]></b:skin>. Guardar los cambios.
4. El código HTML comprendido entre los comentarios <!– Start PureCSSMenu.com MENU –> y <!– End PureCSSMenu.com MENU –> debe ser copiado antes o después del cierre del div ‘header-wrapper‘ (en la plantilla Mínima de Blogger), reemplazando las dobles comillas por comillas simples (‘). Una manera más simple de hacerlo, es creando un nuevo gadget de HTML/Javascript desde Diseño /Elementos de la página, en la sección llamada “crosscol-wrapper” que está justo bajo la cabecera y copypasteando el código allí. Esto último facilita su edición en cualquier momento.
5. Como últimos pasos, queda hospedar en tu hosting las imágenes contenidas en la carpeta images y reemplazar los enlaces en el CSS, justo donde se indica; y estilizar un poco el menú para integrarlo a la plantilla. Para ello, puedes modificar totalmente el CSS. En mi plantilla de pruebas, le di al contenedor #crosscol-wrapper un ancho de 100%, usando el mismo color del fondo que tenía originalmente mi menú:
#crosscol-wrapper { background:#E62E6B; width: 100%;}
Posts relacionados
Compártelo!
Jebú me comentaba sobre Pure CSS Menu, un sitio para crear menús desplegables (drop down) únicamente con CSS, y con la misma técnica usada por Janko Jovanovic.
Aunque el sitio está en inglés, es intuitivo y simple de usar, especialmente para quienes tienen pocos conocimientos de CSS y HTML. Puedes elegir una plantilla, cambiar los bordes, colores, estilo de fuente, configurar enlaces con pocos clicks y descargar luego el paquete zip hacia tu computador.
Cómo instalar un menú (en Blogger)
El fichero “purecssmenu-com.zip” contiene un archivo HTML y una carpeta con imágenes. Su intalación no es complicada:
1. Abrir el archivo purecssmenu.html. Éste se abre en una nueva pestaña de tu navegador.
2. Una vez abierta la pestaña, hacer click sobre ella con el botón derecho de tu mouse, y seleccionar la opción “Ver código fuente de la página“. Esos son los correspondientes códigos a ser pegados en la plantilla.
3. El código CSS comprendido entre las etiquetas <style> y </style> (excluidas éstas), debe ser pegado en la Edición de HTML de la plantilla, justo antes de ]]></b:skin>. Guardar los cambios.
4. El código HTML comprendido entre los comentarios <!– Start PureCSSMenu.com MENU –> y <!– End PureCSSMenu.com MENU –> debe ser copiado antes o después del cierre del div ‘header-wrapper‘ (en la plantilla Mínima de Blogger), reemplazando las dobles comillas por comillas simples (‘). Una manera más simple de hacerlo, es creando un nuevo gadget de HTML/Javascript desde Diseño /Elementos de la página, en la sección llamada “crosscol-wrapper” que está justo bajo la cabecera y copypasteando el código allí. Esto último facilita su edición en cualquier momento.
5. Como últimos pasos, queda hospedar en tu hosting las imágenes contenidas en la carpeta images y reemplazar los enlaces en el CSS, justo donde se indica; y estilizar un poco el menú para integrarlo a la plantilla. Para ello, puedes modificar totalmente el CSS. En mi plantilla de pruebas, le di al contenedor #crosscol-wrapper un ancho de 100%, usando el mismo color del fondo que tenía originalmente mi menú:
#crosscol-wrapper { background:#E62E6B; width: 100%;}
25 Comentarios
Información Bitacoras.com…
Valora en Bitacoras.com: Jebú me comentaba sobre Pure CSS Menu, un sitio para crear menús desplegables (drop down) únicamente con CSS, y con la misma técnica usada por Janko Jovanovic. Aunque el sitio está en inglés, es intuitivo y simple de usar, es…..
Hola Clau, me paso tu web el Potro de Ciudad Blogger, por que yo anda buscando como bloquear un usuario por IP por que una persona se hizo un blog a costilla mi me saco todo todo lo mio :@
El potro me paso este post http://chicablogger.com/dos-interesantes-hacks-vietnamitas-para-blogger/ , pero lo puse en la plantilla y me salta este error: No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The content of elements must consist of well-formed character data or markup.
Quiero que me ayudes a solucionarlo lo mas antes posible.
Espero tus respuestas.
Abrazo!
i can’t understand everything that’s written, but i love your blogger templates. i plan to use one of them on my blog.
Aun no se como he encontrado tu blog y me encanta! Me parece muy interesante. Tienes otra seguidora.
Un saludo
Disculpa por la pregunta pero cómo puedo hacer para que mi twitter esté en la cabecera del blog como en tu blog.
Mi blog es de Blogger no wordpress. Ayúdame porfa.
Nataly:
Si ya tienes un menú en tu plantilla, sólo tienes que añadir el enlace de tu cuenta Twitter
No me refiero al enlace, sino a las letras; por ejemplo, en tu cabecera aparece lo último que pusiste en twitter (Camino a Caburgua con mi amigo Jose. Vamos a comer tallarines todos los dias. Vuelvo el viernes.)
Me gustaría que también el texto de mi última actualización en twitter esté en la cabecera en mi blog de blogger.
Porfa, ayúdame
Por favor, te pido que me ayudes.
Hola, ya habia visitado tu sitio antes, esta muy bueno,
Te envio este mensaje para dejarte saber, no se si ya lo sepas, que tu menu se ve mal en IE8, en Firefox luce bien, se ve hacia abajo y empalmado.
Very useful yet easy to use menu generator, think of introducing it to my friend who’s learning web design.
[...] [...]
si si claro claro
Hola, te quiero comentar que el menú funciona muy bien en IE6 y Firefox, pero en IE8 no anda (no pude probar aun en IE7). ¿Tendrías alguna ayuda sobre esto? Gracias.
hola, fijate que he recibido todas las instrucciones, ya tengo todo montado pero el menu desplegable horizontal, no se deja ver….
quería saber si como la vez pasada me puedes dar una mano, este blog es un ejercicio para aprender, no es nada comercial, lo aclaro porque le pedí ayuda a un bloggero y me regaño…
Quería saber si tu puedes darte una pasada por el blog y analizar que pueda pasar, estuve viendo tu código y agregue una parte del código que es un buscador interno y ahora no sé como quitarlo.
Podrías por favor ayudarme.
[...] Vía: Chica Blogger [...]
Esos gráficos son tan pequeños que no se ve nada.
No me sirve.
muchas gracias, me ha sido de mucha ayuda ya que necesitaba un menu asi…
hola en mi blog no puedo hacer funcionar correctamente los submenus ya que no se me muestran, me podrias ayudar?
Esto es justo lo que necesitaba. Deseo hacer un menú en varios niveles.. y la verdad para mi es complicado; espero que esto verdaderamente me ayude. (=
Buenas, primero, gracias por este fabuloso tutorial, de verdad, tienes un gran blog^__^
Bueno, mi problema es esta. Cuando lo pego debajo de la cabezara, tras haber pegado los codigos que señalas en el texto html, al verse en mi blog, se ve desformado y mal. Cual es la solución? No entendí el último paso
Gracias y espero tu respuesta :3
hola, tengo el menu creado e insertado en el blog, pero los submenus no se me muestran, aparecen cortados, podrias ayudarme. Gracias.
Hola…no entiendo el paso 4 y 5 …alguien me podria ayudar..? este es mi correo roscio.hinojosa@hotmail.com ..gracias
Hola, ya hice todo mi menú desplegable. Pero de verdad que no entiendo como poner en blogger. ¿Podrían ayudarme?
De verdad, lo necesito. Gracias
Gracias por el aporte, estaba tratando de hacer desde cero un menu, pero con esto creo que no es necesario. Saludos
Hola alguien sabe como puedo hacer compatible pure css menu con la publicidad de adsense,porque el menu no pasa por encima de la publicidad.
Saludos.