JMiur [E]

Cuando diseñamos nuestra página y la probamos en otro navegador, lo normal es que no funcione correctamente ¿Por qué? simplemente porque cada uno de ellos interpreta las instrucciones de diferente manera.

Eso es lo que decía hace un tiempo en Firefox, IE6, IE7, todos distintos y eso es lo que sigo diciendo ahora.  Y no sólo se trata de propiedades o instrucciones que algunos entienden y otros no sino que, aún siendo etiquetas comunes, cada uno hace con ellas lo que quiere.

Los comentarios de Jabba y su odisea en busca de un menú que funcione normalmente, son uno de los ejemplos más claros de este problema.

Y es que, lo que quiere hacer, tener un menú que se expanda con submenues, es algo normal, simple, bastaría tener listas anidadas pero claro, las etiquetas de las listas son de las más retorcidas; personalmente, recién hace poco logré que las listas de la sidebar se vieran correctamente en Internet Explorer, tardé casi un año pero ... ¿quién tiene apuro?

No tengo reglas o consejos que aportar, sólo tres ejemplos de menúes desplegables que funcionan tanto en Firefox como en Internet Explorer.

Las dos primera son ejemplos realizados por CSSplay y, si bien sólo emplean propiedades CSS, cualquiera que los analice, verá que el código HTML está plagado de comentarios condicionales para que ciertas cosas se vean en IE6 y otras en IE7.

Professional drop-down using images ha sido verificado en IE6, IE7, Firefox, Opera, Netscape, Mozilla y Safari.

Descargar el ZIP que contiene un ejemplo, las imágenes y la página de estilo necesaria.




Professional drop-down using images and text es una variante del anterior, mucho mas sofisticado porque incluye imágenes en cada subitem y ha sido verificado en IE6, IE7, Firefox, Opera, Netscape, Mozilla y Safari.

Descargar el ZIP que contiene un ejemplo, las imágenes y la página de estilo necesaria.




El tercer ejemplo es el más simple y es al que hace referencia Jabba: CSS Horizontal List Menu que, a diferencia de los anteriores, utiliza CSS y JavaScript y sólo permite crear un nivel de submenues.

Los archivos originales son cinco: csshorizontalmenu.js, csshorizontalmenu.css, menubg.gif, menubgover.gif y menuarrow.gif.

Sin embargo, para el ejemplo que aquí muestro los he modificado sustancialmente para adaptarlos a un tipo de barra de menúes como la que utiliza el blog y que ya he explicado aquí.



Para utilizarlo en Blogger, debemos subir el script a un servidor externo y luego, agregarlo a la plantilla junto con la hoja de estilo; por ejemplo, antes de la etiqueta </head>:
<script src="direccionURL_MENUkithorizontal.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="direccionURL_MENUkithorizontal.css"/>
La clave de todo está en este último así que aquí va una breve explicación, tratando de mostrar cuáles son las propiedades que podemos personalizar para establecer colores y fondos diferentes.
/* propiedades de la barra horizontal de menues */

.horizontalcssmenu ul {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
/* esta es la imagen de fondo, puede utilizarse cualquiera o ninguna */
background: color url(URL_imagen) center center repeat-x;
/* aquí podemos agregar otras propiedades de formato como border */
}

/* esta es área de cada una de las entradas del menú horizontal */
.horizontalcssmenu ul li {
position: relative;
float: left;
/* aquí también podemos agregar otras propiedades de formato*/
}

/* propiedades de cada enlace del menú horizontal */
.horizontalcssmenu ul li a {
float: left;
/* propiedades del formato varias (padding, font, color, etc */
}
.horizontalcssmenu ul li a:hover { 
/* esta es la imagen de fondo para lograr el efecto mouseover */
background: color url(URL_imagenHover) center center repeat-x;
}

/* estas son las propiedades de los submenues */

.horizontalcssmenu ul li ul {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 100;
/* establecemos un valor de ancho fijo para que cada entrada esté en una línea*/
width: 150px; /* el valor puede ser cualquiera */
/* otras propiedades de formato*/
}

/* esta es área de cada una de las entradas de los submenues */
.horizontalcssmenu ul li ul li {/
width: 100%;
/* otras propiedades de formato*/
}

/* propiedades de cada enlace del menú horizontal */
.horizontalcssmenu ul li ul li a {
/* ancho fijo (menos padding) */
width: 140px; /* en este ejemplo, 150 - 5 - 5 = 140 */
padding: 2px 5px;  /* conviene establecer un padding para separar los items */
/* otras propiedades de formato*/
}
.horizontalcssmenu ul li ul li a:hover {
/* esta es la imagen de fondo para lograr el efecto mouseover */
background: url(menuHover.gif) center center repeat-x;
}
Ahora, debemos colocar el código HTML de los menúes. Lo hacemos en el lugar de la plantilla donde queremos que aparezca:
<div class="horizontalcssmenu">
<ul id="cssmenu1">

<!-- un item del menú sin expandir -->

<li><a href="direccionURL">TEXTO MENÚ</a></li>

<!-- un item del menú expandible -->

<li>
<a href="#" onclick="return false;">TEXTO SUBMENÚ<></a>
<ul>
<li><a href="direccionURL">ITEM 1</a></li>
<li><a href="direccionURL">ITEM 2</a></li>
<li><a href="direccionURL">ITEM 3</a></li>
</ul>
</li>

</ul>
<br style="clear: left;" />
</div>
Descargar el ZIP que contiene el ejemplo HTML, las imágenes y los archivos JS y CSS necesarios.

47 comentarios:

Jabba  

Fantástica entrada. Voy a probar con uno de los ejemplos de CSSplay que das. Gracias por el trabajazo y por la paciencia.

¿Llegará el dia en el que los Navegadores se desconfundan? ;)

Responder
JMiur  

Elegiste los engorrosos :D

No importa, son eso, engorrosos, pero no son complicados de entender, en todo caso, te recomiendo probarlos tal como están y luego, irlos modificando a tu gusto, teniendo la precaución de tener copias de cada avance realizado; no te pase como a mi que después de tocar algo que no debía, tuve que empezar de cero otra vez :$

Responder
...Markos...  

jova , es lo que quería descubrir yo jaja , pero como de costumbre no sabíacomo hacerlo jaja....menos mal que nos quedas tú
Muchas gracias

Responder
Jabba  

Me he vuelto loco intentando hacerme con lo de CSSplay así que tras casi un dia de pruebas y mas pruebas he decidio mandar a tomar viento los menus expandibles y he optado por poner uno de los ejemplos que das (el que usas en Vagabundia) pero sin submenus expandibles, porque los submenus (incluídos esos) siguen sin funcionarme en Internet Explorer.

Me he decidido al final por conseguir que el Blog sea visible y navegable sin muchos problemas para cualquiera que entre, así que tampoco le he puesto muchas filigranas, ni submenus ni nada. He puesto el menu principal y luego una herramienta supercuriosa que me hace un buen papel en el blog; se trata del Dynamic-FX Slide-In Menu. Creo que ha sido un acierto.

Total que entre unas cosas y otras, me he puesto y al final me ha dado el punto y me he optado por darle un cambio visual y estético enterito al blog, pasando del más pulcro y resplandeciente blanco, a un tono algo mas... oscuro jeje.

Aún quedan muchos retoques, pero está ya en camino.

Ya me dirás que te parece.

Un saludo!

Responder
Jabba  

Por cierto... bendita la madre que parió a Gago y al "Pipita" Higuaín. Menudo partidazo se han marcado los dos esta noche contra el Werder Bremen en su debut en Champions League (sobre todo en la primera parte).

Responder
Gem@  

La que has liado, ahora tengo que probarlos todos :(

Responder
JMiur  

Hay que hacerlo con cuidado pero, evidentemente se puede. Lo que no estoy muy seguro es si este tipo de menú tiene alguna utilidad en Blogger.

Responder
Jabba  

Todo es útil... hasta que se demuestra lo contrario ;) (y por favor no intentes demostrarlo que miedo me das).

Responder
JMiur  

Jajaja, entonces, me retracto Jabba, haz de cuenta que no dije nada :D

Responder
F3DORVL4  

Hola Jmiur, tengo un menú horizontal parecido al tuyo. Lo ubiqué,en el HTML, debajo de div id='header-wrapper' lo que hacía que se viera por encima de la cabecera y no he tenido problemas con él.
Ahora que he intentado, siguiendo todos tus pasos, ubicar el HTML del menú desplegable debajo del menú horizontal ya implementado o debajo de la porción de código arriba descrita, aparece este mensaje:
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..
Sólo aparece este mensaje cuando intento guardar los cambios después de colocar el HTML en esas posiciones, reviso si el CTRL+C y CTRL+V está bien y todos los elementos están cerrados respectivamente.
Que puede estar pasando?.
Salu2!

Responder
JMiur  

Difícil saber sin ver el código en si mismo. El mensaje de error no parece referirse a una etiqueta mal cerrada sino a algo más amplio lo que hace complicado deducirlo.

Pueden ser errores de comillas, revisar simple y dobles.
Puede ser algún carácter como el símbolo &
Puede ser que esté mal ubicado el código.

Estoy tratando de adivinar.

Responder
JMiur  

El CSS de CSSplay puedes colocarlo en la plantilla o fuera de ella, es indiferente y la decisión depende nada más de como te guste organizar las cosas.

Par el problema del IE, revisa las propiedades width y height de los elementos que utilizas, normalmente, IE requiere que estén definidas.

Responder
ls  

Ay... (hace calor).
Hola, JMiur. Quisiera armar un blog con un menú expandible como el que explicás -con demasiada claridad- pero vertical. Sí, lo sé: escribiste cómo hacer un menú vertical, ese con dibujitos, pero puedo encontrarle la vuelta para que sea expandible y vertical y sin dibujitos, algo como celdas, digamos. El mangazo amable: ¿sabés de algún css para descargar, al estilo de los que anotaste en este post, y no molestarte con muchas preguntas? ¿Está en algún lugar de tu blog y con este porteño clima no encuentro ni mi ombligo? Si pudieras orientarme de algún modo para hacer un menú expandible, vertical y a lo celda tras celda, me ayudarías mucho. Disculpas por molestar pero lo preciso -cuestiones laborales- y no pego una.
Un abrazo, a pesar de los casi 40 grados. Es un placer leerte a diario, aunque no seas un Blog*Star xxD...

(Ah -la del estribo-: ¿Dónde está, porque sé que lo vi y no lo encuentro (...) lo del resize a 1024? Clickeo en el dibujito y no veo el enlace, si es que allí había alguno. Me voy, callando.)

Responder
JMiur  

40 grados ayer, hoy, vamos por más. Sudor sudor sudor. Tengo que comprar una PC impermeable y meterme en la bañera hasta el otoño :D

El tema de los menues es complicado, sobre todo los verticales, apenas pude con estos ejemplos pero hay una colección de ellos en dynamicdrive y suelen ser "relativamente simples".

Lo del ancho está AQUI Aunque habla de un script para variar los anchos, la idea es la misma. Hay que buscar las propiedades CSS que indiquen width e ir modificándolas y ver los resultados con VISTA PREVIA.

Si hay algún detalle en particular que no comprendas, me avisas.

PD: ¡SAN PEDRO: APAGA LA CALEFACCION!!!!

Responder
ls  

Y fuimos por más calor, nomás. Esta ciudad está en el horno (lit.): ¡no se puede fumar en ningún lugar con aire acondicionado! ¿Cómo se prentende que uno/a encuentre algo que vio una decena de veces con 35 grados a estas horas de la madrugada? (Pueril excusa, lo sé.)

Te agradezco mucho el dato de dynamic drive, que he de probar en cuanto duerma un poco. Ahora, si vos anotás que el tema es algo complicado, otro ay (=lamento). Lo voy a intentar porque la patronal lo exige, y espero no tener que fastidiarte con ningún detalle en particular ni fastidiarte (más), pero sospecho que tal vez tenga que hacer uso de tu gentil ofrecimiento. Me disculpo desde ahora, por si acaso.

La calefacción sigue prendida en el barrio de Congreso (sí, señor: es un barrio), y me avergüenzo de haberte preguntado dónde está "lo del resize" -qué precisión al consultar-: allí donde me indicás es donde tantas veces lo había visto. La calor no me mata pero me pone más estúpida.

Un abrazo, JMiur, y muchas gracias por tu ayuda.
(Devolvele los bigotes a Caparrós :D)

Responder
JMiur  

Una abrazo .. de lejos porque estoy pegajoso :D

Ah, y los bigote no pienso devolverlos :D

Responder
JUSTA INDUMENTARIA  

que tal si es que podes podrias ayudrame a colocar este menu en mi blog?http://www.cssplay.co.uk/menus/flyout_horizontal.html
no va ser tan complejo solo usare una linea desplegable se entiende?
gracias!

Responder
Unodetantos  

Hola, quisiera saber cómo puedo conseguir el widget que tienes en la sidebar. Me refiero al de la Autopromo, en el que hay distintas secciones y aparecen su contenido cuando se cliquean en ellas.

Muchas gracias

Responder
JMiur  

No existe un widget preparado para eso, lo hice "a mano". VEré si puedo explicarlo en algún post.

Responder
JUSTA INDUMENTARIA  

hola que tal escribo de nuevo por que etoy con un problema que no puedo solucionar coloque el menu que comente anteriormente el problema es que me parece que se fuciona con el que estaba antes que era el de el templete original esta es la direccion del blog en cuestion justaindumentaria.blogspot.com
cualquier sugerencia sera agradecida!!!

Responder
JMiur  

A ver si entendi ¿El problema son los enlaces?

Si es así, cada uno debe tener algo como esto:
<a title="" href="../layouts/body2.html">

Eso es lo que debes cambiar:
../layouts/body2.html
debes colocar la dirección que quieras abrir.

Responder
JUSTA INDUMENTARIA  

no los enlaces no son el problema
el problema es cuando coloco el menu aparesen "creo" dos containers el del antiguo menu y el del nuevo. lo que voy a probar es sacar todo limpiar y volver a colcar a ver que pasa. gracias!

Responder
JMiur  

El problema es que yo, sólo veo uno.

Responder
Unodetantos  

JMiur, si escribieses ese post seria uno de los primeros en leerlo. :)

Me interesa mucho saber cómo ocultar/mostrar un contenido en la sidebar. Mi problema es que ya he conseguido hacerlo, pero no de la manera en que lo has hecho tu, me explico:

En tu sidebar tienes un elemento de pagina y DENTRO 3 secciones expandibles. Lo que yo he conseguido ha sido expandir/ocultar TODO EL CONTENIDO de un elemento de pagina, y eso no me sirve. porque mi propósito es crear un indice en mi blog que se vea así:

A
B
C

Y que al pinchar en cada letra, se expandiera y mostrara un listado de enlaces que empezaran por esa letra:

A
B
-BAD DREAMS
-BANDH DARWAZ
-BANGKOK DANGEROUS
C

Agradecido te estaría si pudieras explicarme cómo hacerlo :D

Saludos!

Responder
JMiur  

OK, me comprometo a hacerlo :)

Responder
Unodetantos  

Gracias... :)

Responder
El Aventurero  

Hola JMiur, aquí estamos de nuevo, aprendiendo un poco :)

Verás, quería poner el primer menú que has mostrado en la entrada en mi blog, pero al bajarme el archivo zip, creo que no está la página de estilos necesaria, que creo que es lo que hay que poner en la plantilla.

Gracias y saludos!

Responder
JMiur  

Fíjate en la página web que viene con el demo. El estilo está allí. La puedes editar con el block de notas. No tiene una hoja de estilo separada.

Cualquier cosa, puedes descargar el que uso en el post aunque deberás cambiar las imágenes.

Responder
rosmel  

Hi Jmiur Queria Hacerte una pregunta io hago todo lo que dices y me funciona pero pasa unos minutos cierro mi blog lo abro dnuevo y no esta en menu desplegable pero si sal el texto y los link pero ya no es desplegable y sin imagenes que hago. lo que yo hago en alojar el script.js y el .css porque arriba me pide la url de los 2 como ia dice me funciona por unos momentos nomas

Responder
JMiur  

Lo he probado varias veces en http://narutoshippudenspain.blogspot.com/ pero, no noté que se produjera ese problema. Es raro porque debería funcionar o no funcionar.

Podría ser que el script no se cargara.

Responder
Theemilio_crazy  

Muchas Gracias JMiur por esto, no andaba buscando desde hace mucho tiempo... Tengo un pequeño problemita mira mi blog de pruebas http://pruebastheemiliocrazy.blogspot.com y veras que el menu quedo muy pequeño, trato de cambiar los valores, pero sigue asi, y tambien fijate en el color verde, es imposible quitarlo jejeje, Bueno espero que me puedas ayudar... Eres el Mejor :D

Responder
JMiur  

Theemilio_crazy: Tu blog de pruebas sólo admite invitados. Hazlo público, me avisas y me fijo a ver qué puede hacerse.

Responder
Theemilio_crazy  

jeje ok Se me avia Olvidado... Mira el problema que te dije se soluciono cuando le quite esto: direccionURL_MENUkithorizontal.js Y direccionURL_MENUkithorizontal.css, Pero ahora no me abren los Submenus, Gracias por todo, Espero que me puedas ayudar :D

Responder
JMiur  

No puede funcioanar amenos que coloques el script y el css. debes alojarlos en alguna pare o copiarlos y egarlos en la plantilla misma.

Por otro lado, los enlaces dene decir # y eso significa que no pueden ser editados en modo Redactar porque Blogger los cambia. Fíjate que ahora dicen cosas como:
http://www.blogger.com/rearrange?blogID=3492278687239784496&action=editWidget&sectionId=header-column-bottom&widgetType=null&widgetId=HTML19#

Responder
Theemilio_crazy  

Bueno JMiur gracias, pero volvi a poner el script y no funciona tu mismo mira... En serio necesito este menu es que me pase horas y horas busca e instalando menus y no servian y ahora tengo la oportunidad de poner este y no puedo, espero que me puedas ayudar enserio necesito este menu :D

Responder
JMiur  

El mensaje ques e ve en el código fuente dice:
You don't have permission to access /script/script2/csshorizontalmenu.js

O sea, el script es inaccesible.

Responder
Theemilio_crazy  

Que me suguiere entonces ?

Responder
JMiur  

Debes hacerlo público porque sino no podrás usarlo.

Responder
Theemilio_crazy  

Muchas Gracias JMiur, Al Final si me funciono :D, Muchas Gracias en verdad... Solo una cosa, cuando le pongo el puntero al Submenu no aparece igual al que esta aqui osea el color naranja no aparece y ya lo agrege a la plantilla.

Responder
JMiur  

Me alegra que se resolviera.

Fíjate de agregarle la palabra !important al fondo, veamos si eso lo fuerza aa mostrarse:

.horizontalcssmenu ul li ul li a:hover {
/* propiedades del formato */
background: url(http://i26.tinypic.com/9sbimb.jpg) center center repeat-x !important;
}

Responder
Theemilio_crazy  

no, jeje no funciona...

Responder
JMiur  

No veo que eso este colocado en el código fuente del blog, sigue diciendo lo mismo que antes.

Responder
Theemilio_crazy  

Bueno lo dejare asi, Gracias ;D

Responder
Theemilio_crazy  

JMiur, Quisiera saber como ponerle SubMenu a los Submenu, Intiendes, como en los ejemplos 1 y 2... El Menu que yo uso es el # 3... Gracias, Espero tu respuesta :D

Responder
JMiur  

Imagino que habría que seguir agregando propiedades pero, es algo que me excede. No sé si en la página del autor habrá alguna información al respecto.

Responder
Prof. de Música  

amigo perdona las molestias, es que no puedo estar quieto asta lograrlo, no sé de esto y como te comente el proyecto es sin fines de lucro no puedo pagar un diceñador, es mas, se que puedo hacerlo. Solo dime, descargo los zip, tengo un html y una carpeta con imagenes que hacen funcionar la barra, ahora las preguntas ¿donde puedo subir o alojar estas imagenes de manera que funcionen, y que parte del html debo copiar en la plantilla de blogger? solo eso...

Responder
JMiur  

¿Donde alojar la imágenes? En Blogger mismo.

El CSS siempre va dentro de <b:skin> </b:skin>

El HTML, puede ponerse directamente en la plantilla o en un elemento HTML que agregues.

No sé exactamente cual es el que está usando aunque ya veo en tu blog un menú desplegable.

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