Menu desplegable 100% CSS

[Verys]

excelente!!!!!

espero que alguno me salga

Saludos =)

[laylu]

Iniciado por Mikmoro

Tienes un error en el enlace. Es este:
farm4.static.flickr.com/3588/3550741145_b586f4da5b_o .png
Seguramente se puede, pero yo no te lo recomiendo en absoluto: me parece poquísimo usable, raro y difícil de entender.
Pide a otras personas que miren tu croquis y pregunta si comprenden qué opciones son qué, a quién pertenecen, etcétera.

1º El error del enlace es porqué aún no puedo publicarlos, por eso le pongo un espacio al final, para que no me salte lo de "Aún no puedess publicar enlaces ...".

2º Sí que funcionaría si resalto el texto del nivel 1 (cambiando el color, por ejemplo), no ? Lo que pasa es que pretendo que en vez de tener que trabajar con "migas de pan", el menú desplazado permanezca visible según la sección que haya seleccionado. Te aseguro que lo he visto en más de una web, y sin marcos en los bloques para cada texto era y es inteligible. La limitación es siempre la misma: el tamaño del fondo.

Ahora, si me dices que no se puede substituir las migas de pan por un menú hecho enteramente en CSS, entonces vale.

Atentament, laylu.

[Mikmoro]

Iniciado por laylu

Ahora, si me dices que no se puede substituir las migas de pan por un menú hecho enteramente en CSS, entonces vale.

¿Me lo dices a mi? No entiendo, pero bueno.

Para gustos están lo colores, y si a ti te parece bien de esa manera, me parece muy respetable. En todo momento he dejado claro que era sólo mi opinión sobre usabilidad, pero es cosa tuya si lo ves claro.

Como te he dicho, pregunta a más gente. Para mi, para empezar es muy poco práctico un menú que tengas que pulsar para que aparezca el submenú, ya que si quieres ir a un tercer nivel como el que muestras, por ejemplo, ya empezamos con dos clicks sólo para ver la opción de tercer nivel, y un tercer click para ir a ella, algo que va en contra totalmente de la usabilidad, y esto ya no es sólo mi opinión, sino de docenas de expertos.

Y por cierto, esto no tiene nada que ver con que la opción quede resaltada cuando vayas a otra página; de hecho no lo hará sólo con CSS ni a tiros (sí, hay una manera, pero no se parece nada a lo que estamos tratando hasta ahora).

En fin, que tengas suerte y lo consigas como a ti te gusta. Saludos.

P.D.:

Iniciado por laylu

1º El error del enlace es porqué aún no puedo publicarlos, por eso le pongo un espacio al final, para que no me salte lo de "Aún no puedess publicar enlaces ...".

Lo sé, pero has elegido la manera menos clara de evitar el bloqueo, con un espacio que no se ve. Es mejor que pongas algo como "3550741145_b586f4da5b_o(punto)png", donde quedará claro que hay que transformar y que no puedes poner enlaces.

[laylu]

Ui, no lo decía para ser tajante ni que lo fuese lo que me has dicho, simplemente hablaba de que si CSS no permite simular migas de pan, sino que hace falta implementar la lógica en JS que vale, que iría por ése lado.

En lo que te refieres a los clics, lo se y tienes razón, pero es que si no lo hago así será imposible mostrar el menú en un background fijo.

Sólo quiero saber si es posible mostrarlo "arriba", alineado a la primera casilla, nada más, o si hace falta JS para hacer algo así. Si además después hago las migas de pan o no ya será otra cosa.

Atentamente i muy muy agradecido por tu atención, laylu.

[Mikmoro]

Pues sí, lo cierto es que me había sonado tajante, como mandarme a paseo, pero bueno, imagino que no era así.
Volvamos entonces a la primera consulta: ¿se puede hacer el menú número 5 pero que las opciones de segundo nivel aparezcan siempre arriba del todo, junto a item 1 del menú?.

Seguro que sí. El selector que controla eso es este:

#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 161px;top:-1px!important;top: -31px;
}

indicando para todos un top de -1px (excepto para IE6, que marca -31px).

¿Cómo hacer para que vayan arriba? pues deberías dar a cada submenú un ID o una clase, y desplazar hacia arriba tanto espacio como el tamaño dependiendo de qué item sea (por ejemplo top: -25px para el submenú del elemento 2, -46px para el 3, o lo que correponda).

¿Combinar eso con el número 7 para que queden las opciones a la vista al ser pulsadas? Buf, mucho trabajo para un menú que considero poco práctico.

Ahí tienes ya todo el material y todas las claves. Espero que lo consigas. Si es así estaría bien que lo mostraras por si a alguien le puede interesar.

[laylu]

Okidoki ! Gracias ! Me pongo, y si algún día lo consigo (en esta vida) os lo publico por aquí.

Ya te mostraré en la web final cómo queda.

Atentamente, Pol.

[jmcm73]

Buenas tardes, y me sumo a las felicitaciones de todos Mikmoro... es un pedazo de menu que hasta IE6 se lo traga... ya me veia con el flash liado!!

Me interesa el menu 2, el que es horizontal y pasando el raton se despliega... pero tengo un problema, houston.

La medida que tiene que tener como maximo es de 736 pixels, que campos del css tengo que modificar para que se ajuste todo a ese ancho. He probado a "jugar" con los anchos, y siempre el fondo del subnivel me sobra por ambos lados...

Gracias de antemano por tu ayuda.

[kseso?]

736px:
#menu
#menu ul li a:hover ul, #menu ul li:hover ul

Ajustar la anchura en función del nº de opciones:
#menu ul li.nivel1
#menu ul li ul li a

Ajustar para que coincidan:
ul.dos a ul.ultimo

En resumen, todo lo que tiene anchura definida (width:Xpx) para adaptarlo a tu caso en concreto.
Un saludo

[jmcm73]

Muchas gracias, me parece que lo comprendi, voy a intentarlo.

De todas formas agradeceria referencias numéricas más claras, que me puedo perder más que un guiri en el Rocio este finde.

[kseso?]

jmcm73:
¿Referencias numéricas más claras? Hace algún tiempo que la bola de cristal está sin baterías.

Sólo das un "número": 736px de anchura de menú, pero nadie más que tú sabe el número de opciones del primer nivel, ni tampoco las de segundo nivel.

Como tantas veces ha aconsejado el autor de estos menús, sólo tienes que utilizar la técnica de "1 prueba por vez y verificación", esto es, haz un cambio y mira el efecto, si todo es correcto, continua, sino, deshaz e inténtalo de nuevo.

Un saludo.

P.D.: bienvenido a FdW

[jmcm73]

Muchas gracias, ya lo entendi y me va bien...

Es verdad que no di mas referencias, eran 6 niveles pero eso ya lo hice y sin problemas.. perdona la falta de datos, la novatada. ya lo coloque ok.

Sólo una cosita mas, como hago para que el menú en vez de estar centrado en la pagina, lo pueda poner a la izquierda... estoy probando cambiar cosas y la verdad q no me sale... oju, que torpe me veo !!!

PD Gracias por la bienvenida, este es para mi un foro de aprendizaje continuo.

[kseso?]

#menu {margin:20px auto;}
esa propiedad define los márgenes.
para que quede alineado a la izquierda:
margin:Xpx Ypx Zpx 0;
X: margen superior,
Y: idem derecho,
Z: idem abajo,
0: idem izquierdo.

Más info: http://www.librosweb.es/referencia/css/margin.html

Guárdatela, esa página te será de mucha ayuda en tu aprendizaje de css.

[jmcm73]

ok, de nuevo mil gracias Kseso?... me lei el enlace que me dejaste y aprendi, que en esto consiste.

ya lo dejo hasta el lunes, pero lo intentare y seguro que me queda como me gusta.

un saludo.

[Mikmoro]

Ja. Cómo me alegra que alguien que no soy yo haya podido dar unas respuesta tan claras, precisas y contundentes sobre los desplegables. Me hace realmente ilusión

Gracias por tu felicitación, jmcm73. Espero que te quede como deseas.

Saludos.

[laylu]

Buenos días,

Estoy pateándome todo el tema pero no doy con un menú en el que el primer nivel sea horizontal, el 2º vertical y haya un 3º vertical (es que no consigo crearlo con mis conocimientos de CSS).

Gracias !

P.D.: Mikmoro, en lo que respecta al menú CSS desplegable pero que quedase a la misma altura que la primera casilla, tenías razón, no va "bien".

[Mikmoro]

Iniciado por laylu

Estoy pateándome todo el tema pero no doy con un menú en el que el primer nivel sea horizontal, el 2º vertical y haya un 3º vertical

Hola de nuevo.

¿No es esto (el número 12) lo que dices?

[laylu]

Sí ! Justo ! Pero dónde están "indexados", porqué en el primer post sólo parecen 4 o 5, no ?

Muchíííísimas gracias, Mikmoro !

[Mikmoro]

Ah, lo siento, es que en el primer post y en las FAQ metí los primeros que iba haciendo, y luego el resto de la colección completa están en mi web.

Quizá no lo mencioné en este hilo.

EDITO: acabo de comprobar que en mi segunda respuesta a tu mensaje ya te hablaba del menú número 10 y lo enlazaba a mi web, luego en otro del 7, etcétera, a lo que respondías: "lo voy a probar".

[Iranio]

Hola,

Llevaba mucho tiempo buscando por Internet un menú vertical desplegable sencillo.
Había encontrado muchos.
La mayor parte se basaban en complicados y largos programas en Javascript.
Otros no eran compatible con algunos navegadores.

Muchas gracias Mikmoro por estos maravillosos y sencillos menúes que resuelven totalmente mi problema.

Un cordial saludo

[galizian]

Muy bueno el menu, no veas el trabajo que me has aorrado.
Muchas gracias

[Mikmoro]

Muchas gracias a los tres: es bonito ver que sirven y que la gente lo agradece.

[Ricardo]

Hola Mikmoro muy buenos tus menues. Estoy utilizando uno, el numero 1 con algunas modificaciones, estoy usando 960grid un framework para css. Incorpore al sitio que estoy haciendo un pequeño menu con unas pocas opciones. El problema es que todo ok en IE8 y Firefox, pero con problemas en las versiones anteriores de IE.

Si pudieras verlo y ver que error puedo estar comentiendo, gracias.

Saludos,

[Mikmoro]

Ni sé las veces que habré dicho lo mismo: ¿cuándo te diste cuenta? ¿cuando las modificaciones estaban ya terminadas? un cambio, una comprobación, es la única manera de asegurarte que no modificas algo importante.

A simple vista, en el original los LI tienen un ancho, mientras que tú lo has eliminado.
ORIGINAL

#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}

TUYO

#menu ul li.nivel1 { float: left;
/*width: 162px;*/
margin-right: 5px;
}

No sé si será exactamente eso, pero es fácil de probar.
Si no lo es, antes de nada compara todos los selectores a ver dónde hay cambios como ese.

[Ricardo]

Perdon Mikmoro, lo primero que hare es probar todo el codigo tal cual lo generaste vos, que funciona en distintas versiones y luego hare las modificaciones. Muchas gracias.
Saludos,

[Mikmoro]

No pasa nada. Siento parecer duro, pero si revisas un poco el hilo (son demasiados mensajes ) verás que hay muchos iguales: modificar tal cosa y ahora no funciona. La norma número uno es comparar el código con el original, y si eso no resulta, comenzar de nuevo con las modificaciones del archivo CSS. Creo que es de lógica.

Prueba a hacer eso y luego pregunta lo que necesites.

[sattua]

sos muy bueno con CSS...gracias por compartir conocimiento....

[Pururauca]

Mikmoro.. sos un ídolo!!!

[Mikmoro]

Iniciado por sattua

gracias por compartir conocimiento....

Ja, no tiene mucho mérito porque me gusta lo que hago

Y gracias, Pururauca, no faltaría más

[S-Virus]

Hola a todos, en especial a Milkmoro por el recurso tan magnífico que ha prestado.

Me gustaría poner una duda, no he leido todo el post, es inmenso pero ando liado con un menu css, sencillo, el caso es que he conseguido hacerlo desplegable mirando de aki y de allá pero en IE 6 como que no funciona. Os pongo los estiilos a ver si me podeis ayudar o si ya se ha solucionado eso aqui indicarme el lugar.

Básicamente esas son las propiedades para hecer desplegable o no el menu, el resultado lo podeis ver en www.studioflash.es/clientes/colorvivo

Código:

ul.menu ul {
        display:none;
    }
    
    ul.menu a:hover > ul {
           display:block;
    
    }

Les estaría muy agradecido.

[Mikmoro]

Buenas.
¿Sabes lo que significa exactamente ese ángulo en este selector?

ul.menu a:hover > ul

Imagino que sí, pero por si acaso, quiere decir "cuando UL sea hijo de A", no descendiente ni hermano, sólo hijo. Eso se suele usar para cuando hay varios niveles anidados, para que no despliegue todo al pasar el ratón sino sólo el hijo (siguiente nivel).

Eso no funciona en IE6. Como en tu caso no parece que haya varios niveles, simplemetne quita el ángulo, y si el resto del menú está bien, debería funcionar.