Con PureCSSmenu es muy sencillo generar un menú para el blog; aún los más complejos con varios niveles de submenues y todo lo hacemos online, sin necesidad de registrarse 
Con una ventana muy sencilla, podemos ir agregando item por item o bien utilizar algunos de los templates predefinidos y cambiar los parámetros gráficos, establecer los enlaces y definir si se van a abrir en una nueva ventana o no.
Con una ventana muy sencilla, podemos ir agregando item por item o bien utilizar algunos de los templates predefinidos y cambiar los parámetros gráficos, establecer los enlaces y definir si se van a abrir en una nueva ventana o no.
Una vez que lo tenemos armado, lo descargamos a nuestra PC. Será un archivo ZIP que contendrá una página HTML de la cual podremos extraer las definiciones de estilo:
<!-- Css Menu --> <style> ....... </style>
Y el código correspondiente:
<ul class="cssMenu cssMenum"> ....... </ul> <!-- (c) 2009, PureCSSMenu.com -->
Así como están, ambos funcionarán bien pero sería mejor si lo verificamos y, eventualmente, lo modificamos para adaptarlo.
 |  |
40 comentarios:
Una herramienta genial JMiur, ¡Y es super sencilla! gracias por compartirla ;).
Realmente fácil de usar porque estos menus suelen ser muy complicados de armar. Ojalá te sea útil :)
Estos me gustan más:
http://www.cssmenumaker.com/
JMiur, ¿útil? más bien ¡utilííísimo! Ya estoy cogiendo ideas y "trocitos" de código para construir un menú ;).
Es cierto, crear menus desplegables es bastante difícil.
Pero y qué tal la compatibilidad?? Quise buscar alguna información pero el sitio no tiene ni siquiera un "about". Alguien lo probó en IE 6?
Si haces la prueba, verás que el código está lleno de hacks para que funcione en IE6 cosa que he eliminado del ejemplo de esta entrada porque no creo que deban usarse.
Una pregunta tonta: ¿Como centrarlo? Es que hay varias propiedades y no lo tengo muy claro, el típico center no funciona al ser un elemento flotante
Angel, como se desconoce el ancho del menú y este tiene la propeidad float, se me ocurre que la unica forma es agregar margin-left:
ul.cssMenu {
display:block;
float:left;
margin-left: VALORpx;
}
hola JMiur!!
tu pagina es muy wena...PERO TENGO UN PROBLEMA!weno mi problema es q hice uno de estos menus para mi blog (http://lacasitadeperros.blogspot.com/), cuando lo descargue y abri la pagina HTML, NO SALE NADA, la pagina sale en blanko!!! q hago??
gracias!!! espero q me ayudes
Pués n osabría decirte. Lo acabo de probar otra vez y el ZIP contiene todo de manera normal.
hola! ya arregle el problema q tenia, descargue los menus de otro sitio (http://www.cssmenumaker.com/) y ahora nose como subirlo a mi blog!! me da las instrucciones y todo, pero el primer paso no lo entiendo, dice: Sube el "Menú" carpeta en el directorio raíz de su sitio web.
Tengo la carpeta pero nose como subirlo a mi web...espero q me entiendas, soy novata en esto
Salu2
Eso no es posible en Blogger, no puedes alojar otra cosa que imágenes.
Hola Jmiur. Me podrias decir en que parte del codigo en el blog debo pegar las dos secciones del codigo que nos cuentas en esta entrada. Gracias. Ya tengo listo el mio pero no he encontrado ninguna entrada que explique donde pegarlo.
Gracias
El CSS lo colocas antes de </head> y el men´´u en si mismo, allí donde quieras que se vea, por ejemplo, debajo el header o arriba de las entradas.
hola JMiur he leido parte de tu blog y te cuento q me pare estupendo como lo tienes bien organizado.
una preguntilla como hago para montar el menu en mi blog puesto q lo he hecho lo he descargado y la verdad no se como montarlo seria posible si me pudieras hechar una mano, te agradezco de antemano si lo puedes hacer o cominicame al correo ceapiemm11-01@hotmail.com gracias
laduarte:
No se que has heco pero, en el archivo descargado hay una página HTML; l abres con el block de notas y copias la parte de estilo, tal como dice el post. Eso, lo pegas en tu plantilla antes de </head>
Luego, buscas en esa página la parte del menú <UL .........> y todo eso lo pegas donde quieras mostrarlo, por ejemplo, debajo del header o en un elemento HTML.
perdona mi ignorancia Jmiur pero algo asi fue lo q descargue y cuando voy al blog y comienzo a editarlo por diseño y edicioon html lo pego debajo de head y me sale la barra del menu en forma vertical y la plantilla del blog se pierde en pocas palabras se daña el blog completo no se si puedas ayudarme y si algo me envias informacion al correo ceapiemm11-01@hotmail.com gracias de antemano y disculpa las molestias ocacionadas pero soy muy ignorante para esto
seria mejor hablar por el correo por q te puedo mostrar imagenes de lo q he hecho
Necesitaría saber cuál es el código que estás usando; así, a simple vista, aprecería que no está funcionando el CSS.
Muchas gracias por tu aporte y felicitaciones por tu blog... ;)
hola , hice todo , pero no encuentro el lugar donde insertar el codigo HTML. sabes como habilitar el lugar exacto y disponible, creo que es debajo del header. o debajo del logo del blog.salu2
No sé dónde lo quieres poner. Lo puedes agregar directamente en la plantilla o bien en un elemento HTML, es indistinto.
En el nuevos sistema de plantillas, no he logrado hacer funcionar el menu de purecssmenu, que es drop.
Tienes alguna sugerencia?
Gracias
No. Habría que verlo funcionando para tratar de saber si hay alguna propiedad que esté influyendo.
Si la pregunta es si hay alguna restricción, la respuesta es no, no hay ninguna pero, esas plantillas estan pensadas para no ser modificadas manualmente así que los detalles se hacen engorrosos de resolver.
Lo primero: enhorabuena por tu página... me está sacando por completo de casi todos mis problemas con mis blogs.
Pero este no soy capaz de resolverlo.. He generado el menú con la herramienta que facilitas... he seguido las instrucciones... pero cuando lo implemento en mi blog, el menú no se desplega. Si el código lo pongo en el pie del blog, si que se despliega. Es como si al desplegar el menú, se topase con la primera entrada y ya no se ve... Vamos que el menú no se sobrepone por encima de la última entrada... No se como hacer que los submenús "floten" por encima de las entradas...
De antemano, gracias
Javier:
¿Tienes algún ejemplo donde peuda verse online?
aunque los enlaces de los submenus no funcionan (te saldrá el error de página no encontrada) puedes entrar en marcoblogpureba.blospot.com
además... para más inri, no se donde he tocado, pero ha los submenús están totalmente desplegados... y no se pliegan...
Es que en este blog, estás usando una de las nuevas plantillas de Blogger y allí, las cosas se complican de modo extremo ya que Blogger carga una infinidad de propeidades por defecto que sobrescriben todo el CSS del menú
Para intentar que funcionara, no podría ir allí donde está porque ese lugar es donde más propiedades por defecto se agregan sino en alguna aprte más abajo, fuera de ese rectángulo marrón, sobre als entradas si fuera posible ta cosa.
Muchísimas gracias... voy a probar a ponerlo en una barra lateral, que allí si que funciona...
Cojonudo! Una vez mas salvándome tío!
Estuve apunto de escribirte al Email O.O jaja, pero me dije: "mejor busco a fondo y me aplico" jejeje..
Todo bajo control!.
lo que si hice de mi propia cosecha :) fue liberar los "showaddelement=" de la cabecera y tal, que para variar estaban bloqueados.. Para poder colocarlos por ahí.. =P
Gracias por el aporte!
Luego te molesto un poco para ver si logro ordenar los "mensajes" (estos que estamos aquí escribiendo) así como lo tienes tu, con espacios, enumerados, etc.. Porque a mi me sale todo junto! Y casi ni se distingue el uno del otro!
Un saludo che!
PD:
*******
@JMiur: Angel, como se desconoce el ancho del menú y este tiene la propeidad float, se me ocurre que la unica forma es agregar margin-left:
ul.cssMenu {
display:block;
float:left;
margin-left: VALORpx;
}
*******
YEAH.!
Yo en mi caso le agrege:
margin-left: VALORpx;} y margin-top: VALORpx;}
De esta manera le di algunos valores negativos para situarlo donde lo necesitaba!
-> Por si otra persona se pregunta y/o quiere hacer lo mismo ;)
Un saludo.
Ya cree el menu en la pagina y lo descargue, se me abrio como una pagina web de html con el menu solamente, osea una pagina en blanco y el menu que yo cree. Pero no se que hacer despues de eso, que codigo poner en donde... por favor ayudaaa!
Es lo que indica esta entrada: Será un archivo ZIP que contendrá una página HTML de la cual podremos extraer las definiciones de estilo ....
hola gracias por este aporte , bueno yo e realizado todo me funciona pero tengo un problema , es que al dar click en un enlace del menu me abre otra ventana y pues es como incomodo para los visitantes
Revisa las etiquetas <a .... y si tienen este atributo: target="_blank", lo quitas
oye muchas gracias tenias toda la razon gracias por este buen aporte
Perfecto, Andrés.
nuevamente me encuentro con un inconveniente , es que si tengo imagenes publicadas en las entradas cuando se el da klic encima de estas imagenes se pierde la visibilidad de la imagen por que sale el menu encima de la imagen , agradezco tu colaboracion gracias.
No se cuál es el sitio al que haces referencia. Tengo que verlo.
Hola, he usado purecssmenu, es verdad que es muy fácil, y el menú funciona perfecto pero los botones del submenu se desactivan cuando vas a clicar sobre ellos (cuando lo pruebo en la web purecss... si funciona bien), me da la impresión que la zona activa es muy pequeña o está desplazada, estoy buscando ayuda en español pero no encuentro nada, ah tampoco es cuestión del navegador, lo he probado en todos. Te agradecería muchisimo si me echaras una mano. Gracias!
Tendría que ver tu ejemplo pera tratar de descubrir el error pero, es algo tal como dices, al estar separada la parte superior de la inferior, se cerrará, mientras tanto, puedes tratar de buscar márgenes o la propiedad top de alguna de las reglas de estilo que lo afectan.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...