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. ¿Has modificado alguna otra cosa? Por si acaso, bájate nuevamente la hoja de estilo y compárala con la tuya....

  #151 (permalink)  
Antiguo 24/10/2008, 06:14
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

¿Has modificado alguna otra cosa? Por si acaso, bájate nuevamente la hoja de estilo y compárala con la tuya.
__________________
Visita mi nueva web idplus.org
  #152 (permalink)  
Antiguo 24/10/2008, 06:30
 
Fecha de Ingreso: julio-2008
Mensajes: 13
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
¿Has modificado alguna otra cosa? Por si acaso, bájate nuevamente la hoja de estilo y compárala con la tuya.

joer tio esto en vez de un foro parece un chat por tu velocidad de contestar, eres un maquina. He comparado, y he optado por quitar las celdas en las que se encontraba el titulo. O sea poner el titulo "a pelo" asi...

<p align="center"><i><font size="7" face="Comic Sans MS" color="#FFFFFF">Maria
Balibrea Melero </font></i></p>
<div id="menu" style="width: 674; height: 361">

de esta manera no me ha dado problemas y ya se abre en todos los buscadores.

comparar con tu html no me servia porque en tu html no tienes puesto titulo solo estan los desplegable, si le pones celdas al principio del body (antes de los desplegalbe, podrás ver que no se ven los desplegables, al mesno eso me pasaba a mi. Por eso al quitar las celdas ha funcionado.

Tu hoja de estilo pracitamente la tengo impoluta.

Muchas gracias por todo, genio.
  #153 (permalink)  
Antiguo 04/11/2008, 17:01
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 CaPaSe Ver Mensaje
¿Como puedo combinar primero el menu horizontal de dos niveles, con uno vertical para que se despliegue a la derecha al pasar el mouse por alguna de las opciones del submenú?
Hola, CaPaSe.
Ya me puedes perdonar que sólo con ¡¡¡3 meses de retraso!!! contesto a tu duda. Es que se me olvidó por completo.

Supongo que ya te has buscado la vida con otra cosa, pero es que el otro día por otro asunto hice un menú como tú querias: horizontal, que despliega en vertical y con un tercer nivel también en vertical, a la derecha del segundo.

El enlace es este:

http://www.araudi.net/Desplegables/m...legable12.html

Ya siento el lapsus. Al hacerlo me acordé de tu consulta pendiente
__________________
Visita mi nueva web idplus.org
  #154 (permalink)  
Antiguo 09/01/2009, 10:36
 
Fecha de Ingreso: junio-2005
Mensajes: 6
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Ok edito mi pregunta ok

Hice el ejemplo q haz hecho aki y me ha funcionado muy bien , intente hacerlo con mis ideas e imagenes y e logrado q funcione de cierta forma.

he utilizado los pseudo clases Hover, Active , Link para mostrar los diferentes estados de clickeado, visitado y sobre, en mi caso, cree un menu con 3 nivles, el primer nivel he lo grado conseguir q conserve el estado de Active en el cual utilizo 2 imagenes boton1 ( estado hover) y boton2 (estado sobre)

pero para el 2° nivel de mi menu solo logro poner el estado de Hover y en cuanto quito el puntero de mi boton en el segundo nivel este se quita no se keda activa la opcion de Active, lo mismo pasa con el tercer nivel.

Oh me pueden dar alguna idea de como poder hacer el efecto de Hover, Active y ya yo lo intentare por mi cuenta


ahora no se si tenga q utilizar los famosos Hack CSS pero no se como utilizarlos con firefox la verdad no le he entendido como emplearlos

espera ahora haya sido mas claro

Y perdon q no haya sido claro anteriormente y gracias por responderme

Última edición por thebluether; 09/01/2009 a las 23:46
  #155 (permalink)  
Antiguo 09/01/2009, 10:58
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

Perdona pero no entiendo ninguna de las dos preguntas. Si concretas un poco más quizá lo entienda mejor y pueda intentar ayudarte.
__________________
Visita mi nueva web idplus.org
  #156 (permalink)  
Antiguo 10/01/2009, 12:16
 
Fecha de Ingreso: enero-2009
Mensajes: 1
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Hola Mik! en primer lugar felicitarte por tu trabajo. Escribo para preguntarte por el CSS del último ejemplo que has posteado... este:

http://www.araudi.net/Desplegables/m...legable12.html

es que no lo veo por ninguna parte.

Saludos!
  #157 (permalink)  
Antiguo 10/01/2009, 13:04
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 8 años, 8 meses
Puntos: 53
Respuesta: Menu desplegable 100% CSS

Sólo tenías que darle a ver el código fuente para poder ver donde tiene el css...
Pero...
Te pongo aquí el enlace...
http://www.araudi.net/Desplegables/css/menu-12.css

Un saludo..

Aresillo!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #158 (permalink)  
Antiguo 10/01/2009, 16:47
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

Hola, Silpe. ¿Te refieres a la entrada de las FAQ? http://www.forosdelweb.com/f53/faqs-...ml#post2453726

Los enlaces funcionan bien. De todas maneras está exactamente donde te dice Aresillo.
__________________
Visita mi nueva web idplus.org
  #159 (permalink)  
Antiguo 14/01/2009, 06:31
 
Fecha de Ingreso: noviembre-2008
Mensajes: 52
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Menu desplegable 100% CSS

hola mikmoro, necesito otra vez tu ayuda. He visto tus menus y son muy buenos y sobre todo, muy útiles. Me puse a modificar el tercer menu y me encuentro con un problema:
Yo quiero un menu que cuando hagas click te vaya a otra página, salvo en un botón que quiero que al hacer click me expanda dos opciones. El caso es que elimino, por ejemplo, las opciones 1.1 y 1.2 del primer botón y no hay ningún problema, pero cuando le pongo un <a href...>Opción 1</a> me hace esto:


Y solo he cambiado el tipo de letra y los colores, no he tocado nada más.

¿Sabes por qué puede ser? Es que no me atrevo a tocar mucho tu código...
  #160 (permalink)  
Antiguo 14/01/2009, 08:05
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

Pon lo que tienes, a ver qué se ve diferente, porque lo que dices tiene poca lógica (aunque no digo que no pueda ocurrir, claro).
__________________
Visita mi nueva web idplus.org
  #161 (permalink)  
Antiguo 14/01/2009, 09:34
 
Fecha de Ingreso: noviembre-2008
Mensajes: 52
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Ya descubrí el porqué, y era el padding, lo quité y lo arreglé más o menos. Lo que pasaba era que como estaba todo en negro no veía lo que pasaba.

Gracias

Última edición por ridgeback; 14/01/2009 a las 14:11
  #162 (permalink)  
Antiguo 15/01/2009, 01:57
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, vale, pues me alegro de que lo hayas resuelto, aunque sigo sin estar seguro de que ese fuera el problema y esa la solución.
__________________
Visita mi nueva web idplus.org
  #163 (permalink)  
Antiguo 22/01/2009, 07:57
 
Fecha de Ingreso: noviembre-2008
Mensajes: 52
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Menu desplegable 100% CSS

En el menú horizontal con despliegue en vertical(hover)
¿como puedo cambiar la anchura de los submenús? Es que cambio la anchura de "Opcion 1" "Opcion 2", etc pero "Opcion 1.1" "Opcion 1.2", etc mantienen su anchura. ¿Podríais ayudarme?
  #164 (permalink)  
Antiguo 22/01/2009, 08:20
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

La anchura de las opciones de primer nivel la controlas aquí:

Cita:
#menu ul li.nivel1 {
float:left;
margin-right:2px;
width:162px;
}
Y las de segundo nivel aquí:
Cita:
#menu ul li ul li a {
border-top-color:#000000;
padding:6px 0px 8px;
width:160px;
}
Pruébalo a ver.
__________________
Visita mi nueva web idplus.org
  #165 (permalink)  
Antiguo 22/01/2009, 09:43
 
Fecha de Ingreso: noviembre-2008
Mensajes: 52
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Eso era, muchas gracias.

Última edición por ridgeback; 22/01/2009 a las 12:54
  #166 (permalink)  
Antiguo 04/03/2009, 20:49
Avatar de juancarlosun  
Fecha de Ingreso: febrero-2009
Ubicación: Bogotá
Mensajes: 6
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Excelente, gracias a todos !!!
  #167 (permalink)  
Antiguo 05/03/2009, 06:17
 
Fecha de Ingreso: enero-2008
Mensajes: 133
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Menu desplegable 100% CSS

Vaya tela con mikmoro!!
que le pongan un par de estrella más
  #168 (permalink)  
Antiguo 07/03/2009, 09:30
 
Fecha de Ingreso: diciembre-2008
Mensajes: 15
Antigüedad: 8 años
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Muy Bueno El Trabajo.

CrUX
  #169 (permalink)  
Antiguo 11/03/2009, 08:23
 
Fecha de Ingreso: marzo-2009
Mensajes: 3
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Buenas, lo primero darte las gracias por tus menus, son una pasada,

Queria preguntarte si en el llamas Menu4 de tu primer post de este hilo, hay alguna forma de que una vez que pinchas una opcion de la segunda barra, esta no desaparezca y se quede visible con la opcion que as pinchado marcada.

un saludo y gracias.
  #170 (permalink)  
Antiguo 11/03/2009, 10:34
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

Habría manera, pero generalmente un menú desplegable no está pensado par aquedar desplegado cuando se seleccionauna opción, sino para estsar siempre plegado e indicar la sección en la que te encuentras de otra manera.
Por otro lado, si al pinchar accedes a otra página será en esa otra donde tendrá que haber una copia del menú y hacerle las modificaciones necesarias para que esté visible, y si no es así, es mejor hacerlo con javascript.

Ya dirás qué quieres conseguir exactamente.
__________________
Visita mi nueva web idplus.org
  #171 (permalink)  
Antiguo 11/03/2009, 10:46
 
Fecha de Ingreso: marzo-2009
Mensajes: 3
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Muchas gracias por tu pronta respuesta.

Pues realmente me bastaria con que al pinchar en la opcion de la segunda barra, no desapareciese, ya que luego lo que hago es cambiar el contenido de un DIV con ajax, con lo cual no carga otra página y se mantendria el menu tal cual estaba.

Muchas gracias.
  #172 (permalink)  
Antiguo 11/03/2009, 17:14
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

Eso podría hacerse añadiendo a esos enlaces los pseudo elementos :active y :focus, pero el problema es que esto en CSS no es persistente: en el momento en que pulses en otra parte de la página, y por tanto el enlace pierda el foco, perderá el efecto de activo (es lo mismo que ocurre con las opciones de nivel 1 del menú que citas).

Si vas a usar ajax ahí, lo mejor es que hagas el cambio persistente con javascrirpt.
__________________
Visita mi nueva web idplus.org
  #173 (permalink)  
Antiguo 11/03/2009, 17:27
 
Fecha de Ingreso: marzo-2009
Mensajes: 3
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

El problema es que mis conocimientos son bastante limitados y no tengo ni idea de como hacerlo. De todas formas muchas gracias.
  #174 (permalink)  
Antiguo 11/03/2009, 17: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

Lo mejor será que preguntes en el foro de javascript cómo hacer el cambio de clase de un elemento de un menú para que quede activo.
__________________
Visita mi nueva web idplus.org
  #175 (permalink)  
Antiguo 12/03/2009, 06:56
 
Fecha de Ingreso: marzo-2009
Mensajes: 2
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Hola soy nueva aquí y... necesito ayuda!

A ver primero lo primero me encanta el menú, justo es lo que andava buscando! Aun así soy nueva en el css y necesito ayuda xq lo he probado todo y nada! Odio Explorer! Pensaba que estaba todo perfecto hasta que con explorer topé.

El caso es que explorer 7 no sé porqué pero no me hace el fondo del submenu y he revisado el css y todo bien, pero bueno este es el problema menor el problema que me tiene realmente preocupada es que en ie al desplegar el submenu me mueve el contenidor que en un principio estaba a position:static y si lo cambio a position:absolute no lo despliega.

Alguna sugerencia? Hay algo totalmente imprescindible que tendria que saber sobre incompatibilidades entre ie y los otros navegadores por lo que hace al tema de posicionamento?

Se ha entendido más o menos mi problema?
Muchas gracias!!
  #176 (permalink)  
Antiguo 12/03/2009, 06:57
 
Fecha de Ingreso: marzo-2009
Mensajes: 2
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

ay por cierto! el menu que estoy utilizando es el primero que subiste. Menu horizontal desplegable hacia abajo!

gracias again!
  #177 (permalink)  
Antiguo 15/03/2009, 23:38
Avatar de Threepwood  
Fecha de Ingreso: febrero-2002
Ubicación: Argentina
Mensajes: 892
Antigüedad: 14 años, 10 meses
Puntos: 3
Respuesta: Menu desplegable 100% CSS

Hola, Mikmoro!

Bueno, antes que nada, muchas gracias por este aporte, me ha sido de mucha utilidad.

Fijate que estoy teniendo un *problema* con el menú, a la hora de recorrer el desplegable. Pasa que, cuando voy recorriendo el submenu, este desaparece... como si se hubiera salido del menu. Quizá tiene que ver con que hice más delgados los elementos? Me pasa con IE7 y Opera principalmente.

Mira, lo tengo montado aquí: www.teatromexicano.com.mx/wiki/index.php y tiene submenus "Obras por estado" y "Obras por año". Te pasa a ti?

Te dejo la hoja de estilo, igual y sirve:

Código:
#navbar {  
   text-align: center;
	width: 1000px;
	height: 27px;
	margin-top:2px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}
#navbar ul { 

			list-style-type: none;
			text-align:center;
			padding: 0;
			margin-top: 2px;

}
#navbar ul li.nivel1 { 

float: left;
width: 120px;
margin-right: 2px;
border:1px solid #fff
}
#navbar ul li a {

					display: block;
					color:#88a0a6;
					text-transform:lowercase;
					font-size:10px;
					font-weight:bold;
					text-decoration:none;
					padding:2px 0px;
					position: relative;

}
#navbar ul li:hover {position: relative;
						font-weight:bold;
						color:#000;
						background:#bbdce3;
						border:1px solid #aacdd3;
}

#navbar ul li a:hover, #navbar ul li:hover a.nivel1 {

						background:#bbdce3;
						border:1px solid #aacdd3;
						color: #000;
						position: relative;
						width: 118px;
}
#navbar ul li a.nivel1 {

display: block!important;display: none;
position: relative;

}

#navbar ul li ul {display: none;
}

#navbar ul li a:hover ul, #navbar ul li:hover ul {display: block;

position: absolute;left: 0px;

}

#navbar ul li ul li a {

						width: 120px;

						background: #7bbbc8;
						color: #000;
											text-transform: capitalize;
						border:1px solid #aacdd3;
}
#navbar ul li ul li a:hover {

position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
Cualquier sugerencia sería genial.

Un abrazo

Samuel.
__________________
Equívocos sin importancia
  #178 (permalink)  
Antiguo 16/03/2009, 12: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

Puede que tenga que ver con
Cita:
#navbar ul li ul li a {
background:#7BBBC8 none repeat scroll 0%;
border:1px solid #AACDD3;
color:#000000;
text-transform:capitalize;
width:120px;
}
ese capitalize, que no hace nada (creo) y con que has añadido un borde (el original tiene sólo borde superior) y algún otro elemento al que has añadido borde.

Lo que no me canso de repetir es: no se puede hacer 18 cambios y al final mirar cómo va todo; la única seguridad de que toda va bien es hacer un sólo cambio y comprobar, otro cambio y comprobar. Es la única manera de estar seguro de que todo irá bien al final.
Has cambiado muchas cosas, e intentar adivinar qué produce eso no es fácil.

Te recomiendo vuelta atrás y a revisar paso a paso.
__________________
Visita mi nueva web idplus.org
  #179 (permalink)  
Antiguo 21/03/2009, 16:27
 
Fecha de Ingreso: noviembre-2008
Ubicación: En Algún lugar del Disco Duro.
Mensajes: 94
Antigüedad: 8 años
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Excelente trabajo amigo Mikmoro lo pude implementar sin problemas en un proyecto en el que estoy trabajando mil gracias amigo.
  #180 (permalink)  
Antiguo 22/03/2009, 03:48
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

De nada, es un placer. Me alegro mucho de que haya servido.

Saludos.
__________________
Visita mi nueva web idplus.org
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.