Menu desplegable 100% CSS

[Mikmoro]

Dejando la opición abajo sí.

Mira este ejemplo

Voy a acabar haciendo toda una colección

Mikel.

[JavierB]

Buen trabajo Mikmoro

Te falta el menú vertical que se despliega hacia la derecha/izquierda

Saludos,

[Mikmoro]

Iniciado por JavierB

Buen trabajo Mikmoro

Te falta el menú vertical que se despliega hacia la derecha/izquierda

Saludos,

Todo se andará

Mikel.

[MasterXNicoX]

copado, pero cual es el codigo css ??

[gepd]

Iniciado por MasterXNicoX

copado, pero cual es el codigo css ??

creo que no es muy dificil viendo el codigo de fuente con el boton derecho

http://www.araudi.net/forosdelweb/css/menu4.css

saludos

[Mikmoro]

Efectivamente

Mikel.

[MasterXNicoX]

creo que no es muy dificil viendo el codigo de fuente con el boton derecho

Porque tenes que poner una ironia ???, Disculpa pero no todos sabemos mucho sobre el tema, creo que actuaste mal..
igual todo bien, pero es feo ser asi.

Ya lo tengo Mik, Muchas gracias.

[gepd]

Iniciado por MasterXNicoX

Porque tenes que poner una ironia ???, Disculpa pero no todos sabemos mucho sobre el tema, creo que actuaste mal..
igual todo bien, pero es feo ser asi.

Ya lo tengo Mik, Muchas gracias.

disculpa si lo tomaste con ironía y se que no todos sabemos, me incluyo por que si bien se sobre eso, hay varias cosas que no sé lo puedes comprobar con mis post en el foro

saludos

[Mikmoro]

Ah, lo siento, a mi tampoco me pareció una ironía, sólo que como en los otros menús había puesto el enlace a la css pero en este no, quizá no habías caído que podías ver el enlace a la css viendo el código.

No creo que haya sido a mala fe, MasterXNicoX.

Mikel.

[Mikmoro]

Otro menú para la colección

Este tiene el segundo nivel también en horizontal, pero en lugar de hover, cuando pulsas las opciones se mantiene el segundo nivel a la vista.

La css

Probado sólo en I6 y 7, FF 2 y 3b5, y Opera 9.50.

Dentro de poco los ordenaré y los pasaré a las FAQ.

Mikel.

[daPhyre]

<banner>Menus desplegables serie Mikel(c), ¡Consiguelos en araudi.net!</banner>

Creo que después de todo si tendrás que ponerte un index. Lo siento, pero te estás haciendo promoción aunque no quieras, y ya todos en el foro conocemos tu dominio

[kseso?]

6 más como Mikmoro en otros temas y que tiemblen los Jobs, los Gates, Torval y compañía, que salimos de FW a cientos.
Yo, hasta que no vi sus explicaciones, cuando veía un /div buscaba el *por y el = para intentar resolver la ecuación (es que fui de ciencias)

[Mikmoro]

Iniciado por daPhyre

Creo que después de todo si tendrás que ponerte un index. Lo siento, pero te estás haciendo promoción aunque no quieras, y ya todos en el foro conocemos tu dominio

No, no lo digas ni en broma, a ver si me van a banear

Llevo años haciendo spam encubierto con mi página sin index y ahora me vas a descubrir. El realidad cuando han pasado dos meses, redirijo todos esos enlaces a páginas "de las que nadie visita", y me gano unos miles de euros diarios

Iniciado por kseso?

cuando veía un /div buscaba el *por y el = para intentar resolver la ecuación (es que fui de ciencias)

Jamás había visto un /div de esa manera.

Mikel.

[MasterXNicoX]

Mik, aprovecho que estas online a esta hora :P

Mira estube mirando tu menu:

Tu Menu xD

Y Queria preguntarte una cosita, por ejemplo, este menu, en una resolucion de 800x600 queda muy grande, no hay alguna forma de achicarlo unos 20 pixeles sin que se desalinie el segundo nivel del menu ??

Estube intentando, pero siempre el segundo nivel me causa problemas.

Te Agradeceria mucho, si me pudieras dar una manito ;)

[Mikmoro]

Estoy en línea a estas horas porque estoy en España y son las 9 de la mañana

Si te fijas en la css, las medidas están aquí:

#menu { text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
position: relative;
}
Esta es la medida de la caja menú.

#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
position: relative;
}
Esta es la medida de cada opción del nivel 1

#menu ul li a:active ul {display: block;
position: absolute;
width: 816px;
border: solid 1px #fff;
border-top: none;
background-color: #6CC;
}
Y esta es la medida del menú del segundo nivel, para que ocupe todo el ancho.

Deberás jugar con esas tres medida para ajustarlo exatamente al tamaño que quieres.

[MasterXNicoX]

Muchisimas gracias, como veras, yo sigo a las 4:40 am tratando de terminar mi proyecto jejeje.

Un Abrazo y gracias por ayudarme siempre :)

Te ganaste Mas Carma ^^.

Bye Bye

[MasterXNicoX]

Mira, esto es lo mejor que lo puedo acomodar, pero mira todo lo que sobra al costado:



Aca te dejo el codigo css, asi me quedo, pero no encuentro de donde acomodar esa
parte que me sobra...

CODIGO CSS:

* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}

body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}


#menu { text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
position: relative;}



#menu ul { list-style-type: none;}



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



#menu ul li { float: left;}

#menu ul li a, #menu ul li span {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
a:active {position: relative;
}
#menu ul li a:active {background-color: #6CC;
color: #000;
border-bottom: solid 1px #6CC;
position: relative;
}
#menu ul li span.nivel1 {display: block;
}
#menu ul li:hover span.nivel1 {cursor: pointer;
}
#menu ul li ul {display: none;
}




#menu ul li a:active ul {display: block;
position: absolute;width: 800px;border: solid 1px #fff;border-top: none;background-color: #6CC;}



#menu ul li ul li a {width: 132px;
padding: 6px 0px 8px 0px;
border: none;
background-color: #6CC;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
color: #000;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul.uno {left: -0px;}
ul.dos {left: -132px;}
ul.tres {left: -264px;}
ul.cuatro {left: -396px;}
ul.cinco {left: -528px;}

Te puedo asegurar que es el ultimo favor que te pido ^^.

Un Abrazo chep, me voy a dormir ahora.. sino mañana no me levanta nadie jejeje

Nus vemos mañana!.

[Mikmoro]

Tienes que hacer varios cambios:

1.-
#menu { text-align: center;
font-size: 0.7em;
width: 660px;
margin: 20px auto;
position: relative;}

2.-
#menu ul li a:active ul {display: block;
position: absolute;
width: 656px;
border: solid 1px #fff;
border-top: none;
background-color: #6CC;}

3.-
#menu ul li ul li a {width: 130px;
padding: 6px 0px 8px 0px;
border: none;
background-color: #6CC;
}

Y en último lugar, en el caso concreto de este menú, era necesario marcar un estilo en el html para que funcionaran los "focus" de los "li".

Busca en la cabecera del html, y donde pone:

#menu ul li:focus ul, #menu ul li:active ul {display: block;
position: absolute;width: 816px;border: solid 1px #fff;border-top: none;background-color: #6CC;}

Cámbialo por:

#menu ul li:focus ul, #menu ul li:active ul {display: block;
position: absolute;width: 656px;border: solid 1px #fff;border-top: none;background-color: #6CC;}

Mikel.

[MasterXNicoX]

Mik, felicitaciones de mi parte por tener tanto conocimiento sobre este tema, es bueno que halla gente como vos en este foro.

Gracias Nuevamente..

Un Abrazo grande, saludos desde Argentina !! :P

[MasterXNicoX]

Mik!!!!!!!!!!!!!!!!!!!!!!!! - Estube probando el menu, con las ultimas cositas que me pasaste, pero por ejemplo yo le pongo un nombre a un cuadrito, y en IE me sigue poniendo Opcion1, Opcion2, Ect. Cuando en Mozilla aparece lo que yo escribo... creo que tienen algo que ver estas lineas:

<!--[if IE]><style>#menu ul li span.nivel1 {display: none;}</style><![endif]-->

<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->

<!--[if IE]></td></tr></table></a><![endif]-->

<!--[if IE]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->

<!--[if IE]></td></tr></table></a><![endif]-->

<!--[if IE]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->

<!--[if IE]></td></tr></table></a><![endif]-->

<!--[if IE]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->

<!--[if IE]></td></tr></table></a><![endif]-->

SON 5 CUADRITOS LOS DEL MENU, Y BUENO POR EJEMPLO, EL QUOTE 1 Y 2 PERTENECEN AL PRIMERO DE LOS CINCO CUADRITOS, EL QUOTE 3 Y 4 PERTENECEN AL SEGUNDO DE LOS CUADRITOS Y ASI, SUCESIVAMENTE.


ASI SE VE EN MOZILLA:


ASI SE VE EN IE:




Y SI YO BORRO estas lineas que puse en las citas de arriba... en IE no me deja apretar los botoncitos ¬¬.

Okis, eso era, :S

Tendras alguna solucion mik ??? (o cualquiera :P )

[Mikmoro]

Sí, claro. Tienes que estudiarte un poco más el código para intentar entender lo que hace, que es como podrás aprender, no sólo aplicarlo:

cada botón del primer nivel está hecho con un "li"

<li class="nivel1" tabindex="1"><span class="nivel1">Opción 1</span>

Si esto lo dejamos así, IE no puede actuar sobre estas opciones, porque sólo puede hacerlo sobre los elementos "a".

Por eso, lo que hacemos es ocultar esas opciones para IE y volvemos a dibujar las suyas propias:

<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->

De manera que IE pueda actuar sobre ellas. Entonces, cuando ves el menú con IE ¿tú qué estás viendo?: las opciones que hemos dibujado sólo para IE. De esa manera, si quieres cambiar los nombres y los enlaces tendrás que hacerlo en los dos sitios; uno para IE y el otro para el resto de navegadores.

De todas maneras, prueba cosas y cámbialo todo sin miedo a romper nada. Una buena práctica que yo sigo es: cada vez que voy a hacer un cambio, hago una copia del archivo, así, toco todo sin miedo, de manera que si al final se me hace un desastre, borro eso y cojo la copia anterior sin modificar, así nunca tengo miedo a toquitear todo y probar montones de cosas.
En realidad las personas somos como lo monos: nuestra forma de aprender es tocar algo y ver lo que ocurre; si no era lo que esperaba, un paso atrás y a tocar otra cosa

Mikel.

P.D.: la primera línea que has puesto, <!--[if IE]><style>#menu ul li span.nivel1 {display: none;}</style><![endif]--> no hace falta tocarla.

[MasterXNicoX]

Bueno mik, gracias por esta explicacion ^^ y por tu ejemplo con los monos jaja :P

Cada vez odio mas a Internet Explorer, creo que en mi página voy a poner criticas contra IE y voy a decir porque es bueno usar FF u Otros jejeje. ( No es ilegal, no ?? ).

Igual Voy a intentar hacer algo :)

Un Abrazo y gracias por tu apoyo.

[gepd]

Iniciado por MasterXNicoX

Bueno mik, gracias por esta explicacion ^^ y por tu ejemplo con los monos jaja :P

Cada vez odio mas a Internet Explorer, creo que en mi página voy a poner criticas contra IE y voy a decir porque es bueno usar FF u Otros jejeje. ( No es ilegal, no ?? ).

Igual Voy a intentar hacer algo :)

Un Abrazo y gracias por tu apoyo.

si ésto es democracia, no debería por que ser ilegal, ojalá pase luego el tiempo para que todos usen IE8 ya que ahsta el momento es el unico que cumple con lso estandares :S...

saludos

[samile]

Ummm cual es la propiedad que modificaria la forma de verse el menu principal si vertical u horizontal, float:left?? en que ul deberia ir para que se viera vertical??

Gracias ;)

[Mikmoro]

Sí, básicamente el float left de este selector:

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

Aunque para que te funcione deberás tocar alguna otra cosilla como la posición del submenú:

#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 162px;top:0;
}

Y alguna otra cosa estética como los bordes y demás, pero eso es atu gusto.

Mikel.

[GUSUM]

Aunque todavía no lo he probado, pero por los comentarios de la gente, funciona. Por supuesto, lo aprovecharé.

Gracias Mikmoro!

[Mikmoro]

samile:

como he visto que hacerlo funcionar en vertical tine un poco más de tomate d elo que parece, lo he hecho en este ejemplo como base para que puedas probar y modificar a partir de él. Al fin y al cabo estaba en la agenda hacerlo también en vertical, así que ya está hecho.

Aquí la css

Mikel.

P.D.:
javierB:

estaba claro que acabaría cayendo, ¿no?

[daPhyre]

Tengo una duda, que ahorita no traigo el FF conmigo y luego olvido preguntar.

Para el que debes hacer click, veo que utilizas un a:active... ¿Funciona tambien eso en todos, o debo agregarle además el a:focus?

[Mikmoro]

El :active, tanto en FF como Opera, Safari, Konkeror, etc., funciona como se supone que debería, es decir, hace la acción mientras se mantiene pulsado el ratón, pero IE lo interpreta como si tuviera el foco. Para el resto hay que usar :focus, que es lo que yo he hecho en ese menú.

Iniciado por daPhyre

Para el que debes hacer click, veo que utilizas un a:active...

Uso active y focus, las dos cosas.

Mikel.

[DragonX]

Iniciado por Mikmoro

El :active, tanto en FF como Opera, Safari, Konkeror, etc., funciona como se supone que debería, es decir, hace la acción mientras se mantiene pulsado el ratón, pero IE lo interpreta como si tuviera el foco. Para el resto hay que usar :focus, que es lo que yo he hecho en ese menú.

muy bueno Mik.