JMiur [E]

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:


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:

Jaime Trujillo Escobedo  

Una herramienta genial JMiur, ¡Y es super sencilla! gracias por compartirla ;).

Responder
JMiur  

Realmente fácil de usar porque estos menus suelen ser muy complicados de armar. Ojalá te sea útil :)

Responder
Urbek  

Estos me gustan más:

http://www.cssmenumaker.com/

Responder
Jaime Trujillo Escobedo  

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.

Responder
lordtinchen  

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?

Responder
JMiur  

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.

Responder
Angel  

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

Responder
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;
}

Responder
♡♡ |)ℇиɩƨƨℇ ♡♡  

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

Responder
JMiur  

Pués n osabría decirte. Lo acabo de probar otra vez y el ZIP contiene todo de manera normal.

Responder
♡♡ |)ℇиɩƨƨℇ ♡♡  

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

Responder
JMiur  

Eso no es posible en Blogger, no puedes alojar otra cosa que imágenes.

Responder
RRS  

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

Responder
JMiur  

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.

Responder
laduarte  

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

Responder
JMiur  

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.

Responder
laduarte  

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

Responder
JMiur  

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.

Responder
Akiles  

Muchas gracias por tu aporte y felicitaciones por tu blog... ;)

Responder
Flame Zero  

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

Responder
JMiur  

No sé dónde lo quieres poner. Lo puedes agregar directamente en la plantilla o bien en un elemento HTML, es indistinto.

Responder
Mitos  

En el nuevos sistema de plantillas, no he logrado hacer funcionar el menu de purecssmenu, que es drop.
Tienes alguna sugerencia?

Gracias

Responder
JMiur  

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.

Responder
Javier Marco  

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

Responder
JMiur  

Javier:
¿Tienes algún ejemplo donde peuda verse online?

Responder
Javier Marco  

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...

Responder
JMiur  

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.

Responder
Javier Marco  

Muchísimas gracias... voy a probar a ponerlo en una barra lateral, que allí si que funciona...

Responder
Lui'S Y  

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!

Responder
Lui'S Y  

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.

Responder
Clari  

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!

Responder
JMiur  

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 ....

Responder
andres  

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

Responder
JMiur  

Revisa las etiquetas <a .... y si tienen este atributo: target="_blank", lo quitas

Responder
andres  

oye muchas gracias tenias toda la razon gracias por este buen aporte

Responder
JMiur  

Perfecto, Andrés.

Responder
andres  

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.

Responder
JMiur  

No se cuál es el sitio al que haces referencia. Tengo que verlo.

Responder
elisa  

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!

Responder
JMiur  

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.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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 ...

 
CERRAR