Menu desplegable 100% CSS

[Mikmoro]

¿Has modificado alguna otra cosa? Por si acaso, bájate nuevamente la hoja de estilo y compárala con la tuya.

[balibrea]

Iniciado por Mikmoro

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

[Mikmoro]

Iniciado por CaPaSe

¿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

[thebluether]

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

[Mikmoro]

Perdona pero no entiendo ninguna de las dos preguntas. Si concretas un poco más quizá lo entienda mejor y pueda intentar ayudarte.

[silpe]

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!

[Aresillo]

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

[Mikmoro]

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.

[ridgeback]

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

[Mikmoro]

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

[ridgeback]

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

[Mikmoro]

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.

[ridgeback]

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?

[Mikmoro]

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

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

Y las de segundo nivel aquí:

#menu ul li ul li a {
border-top-color:#000000;
padding:6px 0px 8px;
width:160px;
}

Pruébalo a ver.

[ridgeback]

Eso era, muchas gracias.

[juancarlosun]

Excelente, gracias a todos !!!

[ruben-et]

Vaya tela con mikmoro!!
que le pongan un par de estrella más

[_CrUX_]

Muy Bueno El Trabajo.

CrUX

[raulf69]

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.

[Mikmoro]

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.

[raulf69]

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.

[Mikmoro]

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.

[raulf69]

El problema es que mis conocimientos son bastante limitados y no tengo ni idea de como hacerlo. De todas formas muchas gracias.

[Mikmoro]

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.

[pululant]

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

[pululant]

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

gracias again!

[Threepwood]

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.

[Mikmoro]

Puede que tenga que ver con

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

[mariosequeda]

Excelente trabajo amigo Mikmoro lo pude implementar sin problemas en un proyecto en el que estoy trabajando mil gracias amigo.

[Mikmoro]

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

Saludos.