Foros del Web » Creando para Internet » CSS »

Menu desplegable 100% CSS

Estas en el tema de Menu desplegable 100% CSS en el foro de CSS en Foros del Web. excelente!!!!! espero que alguno me salga Saludos =)...

  #211 (permalink)  
Antiguo 21/05/2009, 13:59
Avatar de Verys  
Fecha de Ingreso: octubre-2008
Ubicación: Argentina
Mensajes: 48
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Menu desplegable 100% CSS

excelente!!!!!

espero que alguno me salga

Saludos =)
  #212 (permalink)  
Antiguo 22/05/2009, 03:08
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
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.
  #213 (permalink)  
Antiguo 22/05/2009, 04:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por laylu Ver Mensaje
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.:
Cita:
Iniciado por laylu Ver Mensaje
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.
  #214 (permalink)  
Antiguo 22/05/2009, 07:17
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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.
  #215 (permalink)  
Antiguo 22/05/2009, 08:07
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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:
Cita:
#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.
  #216 (permalink)  
Antiguo 22/05/2009, 09:50
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 7 años, 6 meses
Puntos: 0
De acuerdo Respuesta: Menu desplegable 100% CSS

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.
  #217 (permalink)  
Antiguo 28/05/2009, 13:46
 
Fecha de Ingreso: mayo-2009
Mensajes: 12
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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.
  #218 (permalink)  
Antiguo 28/05/2009, 14:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 6 meses
Puntos: 538
Respuesta: Menu desplegable 100% CSS

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #219 (permalink)  
Antiguo 28/05/2009, 14:59
 
Fecha de Ingreso: mayo-2009
Mensajes: 12
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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.
  #220 (permalink)  
Antiguo 28/05/2009, 15:09
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 6 meses
Puntos: 538
Respuesta: Menu desplegable 100% CSS

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #221 (permalink)  
Antiguo 28/05/2009, 15:17
 
Fecha de Ingreso: mayo-2009
Mensajes: 12
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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.
  #222 (permalink)  
Antiguo 28/05/2009, 15:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 6 meses
Puntos: 538
Respuesta: Menu desplegable 100% CSS

#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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #223 (permalink)  
Antiguo 28/05/2009, 16:36
 
Fecha de Ingreso: mayo-2009
Mensajes: 12
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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.
  #224 (permalink)  
Antiguo 28/05/2009, 16:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
  #225 (permalink)  
Antiguo 03/06/2009, 05:18
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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".
  #226 (permalink)  
Antiguo 03/06/2009, 05:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por laylu Ver Mensaje
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?
  #227 (permalink)  
Antiguo 05/06/2009, 13:54
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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

Muchíííísimas gracias, Mikmoro !
  #228 (permalink)  
Antiguo 05/06/2009, 16:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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

Última edición por Mikmoro; 05/06/2009 a las 16:17
  #229 (permalink)  
Antiguo 06/06/2009, 05:16
 
Fecha de Ingreso: enero-2002
Mensajes: 27
Antigüedad: 14 años, 11 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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
  #230 (permalink)  
Antiguo 06/06/2009, 07:15
Avatar de galizian  
Fecha de Ingreso: junio-2009
Mensajes: 11
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Muy bueno el menu, no veas el trabajo que me has aorrado.
Muchas gracias
  #231 (permalink)  
Antiguo 07/06/2009, 04:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Muchas gracias a los tres: es bonito ver que sirven y que la gente lo agradece.
  #232 (permalink)  
Antiguo 08/06/2009, 11:59
Avatar de Ricardo  
Fecha de Ingreso: febrero-2003
Ubicación: Capital Federal, Argentina
Mensajes: 60
Antigüedad: 13 años, 9 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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,
__________________
.:: globaldot ::. | diseñoweb
www.globaldot.com.ar

Última edición por Ricardo; 09/06/2009 a las 07:10
  #233 (permalink)  
Antiguo 08/06/2009, 12:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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
Cita:
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}
TUYO
Cita:
#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.
  #234 (permalink)  
Antiguo 08/06/2009, 12:53
Avatar de Ricardo  
Fecha de Ingreso: febrero-2003
Ubicación: Capital Federal, Argentina
Mensajes: 60
Antigüedad: 13 años, 9 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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,
__________________
.:: globaldot ::. | diseñoweb
www.globaldot.com.ar
  #235 (permalink)  
Antiguo 08/06/2009, 13:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
  #236 (permalink)  
Antiguo 08/06/2009, 16:44
 
Fecha de Ingreso: mayo-2009
Mensajes: 45
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

sos muy bueno con CSS...gracias por compartir conocimiento....
  #237 (permalink)  
Antiguo 09/06/2009, 11:50
 
Fecha de Ingreso: octubre-2005
Ubicación: hatillo centro, san jose, costa rica
Mensajes: 16
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Mikmoro.. sos un ídolo!!!
  #238 (permalink)  
Antiguo 09/06/2009, 12:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por sattua Ver Mensaje
gracias por compartir conocimiento....
Ja, no tiene mucho mérito porque me gusta lo que hago

Y gracias, Pururauca, no faltaría más
  #239 (permalink)  
Antiguo 20/06/2009, 04:50
Avatar de S-Virus  
Fecha de Ingreso: enero-2004
Mensajes: 112
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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.
__________________
DISEÑADOR WEB MULTIMEDIA :: STUDIOFLASH
  #240 (permalink)  
Antiguo 20/06/2009, 05:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 54 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 08:30.