Menu desplegable 100% CSS

Mikmoro · #91 (**permalink**) 11/07/2008, 16:56

¿Qué menú estás queriendo usar exactamente?

Mikel.

Bill Gates · #92 (**permalink**) 12/07/2008, 08:53

el numero 3 ese quiero, gracias Mikmoro

Mikmoro · #93 (**permalink**) 12/07/2008, 10:46

Bueno, según ti código no de nada claro dónde ni cómo lo quieres implementar, pero en realidad se trataría de copiar la hoja de estilo correspondiente, enlazarla en la cabecera igual que tienes la otra actual:

<link href="base1.css" rel="stylesheet" type="text/css" />

coger el código html desde que empieza el menú

<div id="menu">

hasta que termina </div>

y ya editar la hoja de estilo para cambiarle los colores, tamaños, etc., y editar el html para cambiar la cantidad de opciones de cada submenú, nombres, enlaces, etc.

No sé cómo ayudarte más.

Mikel.

iozk · #94 (**permalink**) 12/07/2008, 19:56

ami no me sale menu como le hago

Bill Gates · #95 (**permalink**) 12/07/2008, 20:01

Lo quisiera despues de este, abajo de la parte de arriba o en su caso antes de las columnas de izquierda o derecha

JavierB · #96 (**permalink**) 13/07/2008, 02:30

Cita:

Iniciado por iozk

ami no me sale menu como le hago

Como no te explique mejor, dudo mucho que alguien sepa qué problema tienes y menos aún cómo solucinarlo.

Saludos,

iozk · #97 (**permalink**) 13/07/2008, 11:12

hola no sale el menu numero 5 devo escribir las tablas en html??

Mikmoro · #98 (**permalink**) 13/07/2008, 11:41

No te entiendo en absoluto. ¿Qué quiere decir "no sale el menú número 5"? Si pinchas el enlace sí sale.

Mikel.

iozk · #99 (**permalink**) 13/07/2008, 12:07

si ya se porque.........

espera copie el codigo css a mi archivo pero ne tengo el codigo html
para que salgan los menus y eso!

el codigo html es como el de para hacer botones verdad

aqui

<html>
<link href="menu.css" rel="stylesheet" type="text/css" /></html>
<div id="menu">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</html>

es algo como esto??

grasc saludoz!!

Mikmoro · #**100** (**permalink**) 13/07/2008, 16:50

El código html del menú lo tienes ahí mismo, es decir, cópialo y pégalo donde quieras y junto a la css en la cabecera funcionará.

Si tienes dudas con esto te repito que deberías leerte una par de tutoriales de html.

Mikel.

elsalta · #**101** (**permalink**) 25/08/2008, 12:13

Hola muchachos!
Mikmoro, tengo copia de tu menu #2 en mi máquina y estoy tratando de comprenderlo, ante de usarlo asi por asi. La gran duda pasa por lo siguiente:
¿Con qué propiedades vos podes hacer que un elemento cualquiera (un LI en este caso) esté oculto y al pasar el mouse por otro cambie a visible?¿Se puede hacer lo mismo con cualquier otra cosa.. por ejemplo un div oculto y al posar el mouse sobre una imagen este cambie a visible?.. es que estoy como perdido.. eh!

En resumen.. se puede explicar un poco el uso de las CSS en estos ejemplos?
Muchisimas gracias!

Mikmoro · #**102** (**permalink**) 25/08/2008, 12:33

Mira, hace tiempo tengo escrito un artículo (que todavía está sin publicar), con una detallada explicación del código usado para los menús desplegables y el por qué.

Está aquí. Es un zip que contiene el artículo, la hojas de estilo y algún ejemplo.

Mira a ver si te aclara algo y si no hablamos.

elsalta · #**103** (**permalink**) 25/08/2008, 13:46

Excelente!! ahora lo estoy leyendo medio por arribita, a primera vista parace Excelente la explicacion!
Un aporte Increible Mikel!!

kaninox · #**104** (**permalink**) 25/08/2008, 14:11

amigo que deberiamos modificar para hacer una mescla entre el menu 1 y 4 digo en el 1 aparecen los "menus" con mouseover y en el 4 con onclick entonces seria dejar el 1 pero con la opcion de onclick es que me gusto :) pero te explico... yo tengo una imagen y quiero que el menu salte a la derecha te pongo una imagen para ver si se puede lograr este efecto que no he podido conseguir :(

como se muestra en la imagen la idea seria presionar la imagen pequeñita y que salga el menu hacia la derecha en mi caso, y bueno como dije con el efecto puesto en el menu 4 que has puesto :)
te estaria agradecidisimo :)

saludos...

CaPaSe · #**105** (**permalink**) 26/08/2008, 09:47

Hola, esto es excelente, yo casi no se nada y relamente me ha ayudado, es justo lo que andaba buscando. Gracias mikel.
Aprovecho para ver si me puedes ayudar:
Utilizando el primer menu, como le puedo hacer que un tercer nivel se despliegue vertical mente justo a la derecha de donde termina el segundo?
Espero haberme explicado. Y gracias

Mikmoro · #**106** (**permalink**) 26/08/2008, 10:42

Mira, aquí hice a petición de un usuario uno de 4 niveles, pero aun no lo he puesto en la lista.

Aquí la css.

A ver si te sirve.

Mikmoro · #**107** (**permalink**) 26/08/2008, 11:10

Cita:

Iniciado por kaninox

la idea seria presionar la imagen pequeñita y que salga el menu hacia la derecha en mi caso, y bueno como dije con el efecto puesto en el menu 4 que has puesto :)
te estaria agradecidisimo :)

Lo lamento pero no entiendo cómo lo quieres hacer.

kaninox · #**108** (**permalink**) 26/08/2008, 13:41

mira como muestra la imagen que puse, tengo una imagen pequeñita, el cuadradito ese que tiene unas flechas azules hacia abajo la idea es presionar este cuadrado y me salga el menú desplegable, pero la imagen muestra que sale hacia la derecha y no hacia la izquierda o centrado pero bueno es un detalle nada mas, espero ahora se entienda...
si no te pongo otras imagenes mas detalladas saludos :D

Mikmoro · #**109** (**permalink**) 26/08/2008, 16:59

A ver si te refieres a algo como esto.

Personalmente prefiero los que despliegan al pasar el ratón, por no obligar a una pulsación, pero es cosa de gustos.

kaninox · #**110** (**permalink**) 26/08/2008, 19:46

sep lo mismo pero me acerco y antes de llegar ya se despliega, pero supongo que es por la tabla larga falsa que pones, :/ haber te explico tengo un menú horizontal....

noticias - proyectos - quienes somos - contacto etc..... flechitas

y donde pone flechitas que es casi al final a la derecha, tengo la imagen de las flechitas por ello como te propuse en la imagen arriba la idea era que izquierda por que si lo hace a la derecha como el ejemplo que me das no se vera el menu por desaparecer no se si hara scroll la pagina para que lo muestre pero no es la idea por accesibilidad espero se entienda gracias por la ayuda :)

Mikmoro · #**111** (**permalink**) 27/08/2008, 01:03

Pues no, no te entiendo en absoluto.

CaPaSe · #**112** (**permalink**) 28/08/2008, 07:55

Si muchas gracias.

Tengo otras dos preguntas
¿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ú?
Estoy haciendo una página que lleva marcos:superior, izquierdo y central, el menu debe ir en el marco central, el problema es que al pasar el ratón hacia el marco superior, alguna de las opciones del menú queda desplegada. ¿Cómo puedo corregir eso?
Espero que me puedan ayudar con eso

Y muchas gracias de nuevo

kseso? · #**113** (**permalink**) 07/09/2008, 17:29

Mis disculpas, pues quizás ésta no sea la forma más 'académica' de proceder.

Desde la última entrada en este tema hasta hoy (08/09/2.008) creo que he atendido al menos cuatro consultas donde la respuesta se encontraba aquí, y sobre todo en el archivo .doc que Mikemoro tiene enlazado en la entrada 102.
Y sólo han pasado 10 días y está sólo en la página 4. Es fácil adivinar lo que pasará dentro de otros 10.
Es por lo anterior por lo que creo conveniente que este 'post' debería situarse entre los temas importantes o agregar un enlace a él en las faq´s, de tal manera que se encuentre bien visible o accesible, pues las dudas o problemas con menús son uno de los temas más recurrentes en el foro de css.
Así que este comentario es para llamar la atención de quien pueda valorar la conveniencia o no de hacerlo así y para que mientras tanto no se entierre entre tanta consulta.
Y por lo mismo, reporto mi propio mensaje para facilitar que algún moderador tome la oportuna decisión.
Mis disculpas, de nuevo, por las formas.

Un saludo

P.D.: una vez resuelta la cuestión, sería conveniente borrar éste comentario que nada aporta

Mikmoro · #**114** (**permalink**) 07/09/2008, 17:41

Hola kseso?.

Como los menús ya están en las FAQ creo que no es mucho problema que este post vaya para abajo. Quizá si debería meter el artículo con la explicación en las FAQ, pero no lo he hecho hasta ahora porque no sé si es muy ortodoxo.

kseso? · #**115** (**permalink**) 07/09/2008, 17:54

Gracias Mikemoro.
[duda: ¿no estaremos desvirtuando el hilo y sería mejor por mp?]
La diferencia, grande, que encuentro entre la relación de 'recursos' de las faq´s y este tema es que aquí se resuelven cuestiones muy concretas de fallos/malfuncionamientos (excepto esta cuarta pág.)
Pero bueno, era SÓLO una opinión/sugerencia propia con muchas dudas al respecto.
Un saludo.
P.D.: pensándolo mejor, creo que en vez de pedir que hagáis será mejor que haga algo al respecto. Así que con tu permiso, me tomaré la libertad de incluir en un .pdf todo lo relativo a menús, incluido tu .doc, y una vez realizado (eso sí, con tiempo y calma, y previa supervisión y VºBº del autor) colocarlo.

Mikmoro · #**116** (**permalink**) 07/09/2008, 17:59

Ah, sí, por mi no hay problema, ya sabes. Y tienes razón, en este hilo hay más cosas al respecto que lo que hay en las FAQ.
Bueno, mientras la búsqueda funcione y alguien como tú referencie al hilo cuando hay consultas parecidas, no hay problema.

EmpireFX · #**117** (**permalink**) 08/09/2008, 06:09

Che que lindo trabajito que te mandaste, ayuda mucho :)
Para el interesado que quiera ver mas menus ( http://www.cssplay.co.uk/menus/ )
Saludos

Darwinformatico · #**118** (**permalink**) 08/09/2008, 08:46

Excelente aporte mikmoro gracias por compartir!

oligc90 · #**119** (**permalink**) 09/09/2008, 02:41

Muchas gracias, la verdad que me viene como anillo al dedo

Kilofafeure · #**120** (**permalink**) 16/09/2008, 02:11

Buenas, abrí una discusión pero creo que el lugar correcto para ponerlo es aquí, ...he estado haciendo pruebas con mi menú desplegable y me funciona pero no de la misma manera en explorer (7) que en firefox (3.0.1)...

en IE me lo muestra así:

en Firefox así:

Como podria hacer para que en firefox me los muestre juntos como en explorer y para que en explorer no me moviese Catálogo y no me desplazase la 1ª opción hacia la derecha?? Gracias!!!

Mi css:

* {
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
}
#menu {
/* Lo tuve que cambiar para que me lo situase correctamente...
font-size:0.9em;
margin:20px auto;
text-align:center;
*/
height:16px;
margin:0 20px 0 0;
padding:10px 0;
text-align:left;
}
#menu ul {
list-style-type: none;
}
#menu ul li.nivel1 {
float:left;
}
#menu ul li a {
background-color: transparent;
color: #FFFFFF;
display:block;
padding:0px;
position:relative;
text-decoration:none;
}
#menu ul li:hover {
position:relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #111111;
color: #FFFFFF;
position:relative;
}
#menu ul li a.nivel1 {
display:block !important;
position:relative;
}
#menu ul li ul {
display:none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display:block;
left:0;
position:absolute;
width: 150px;
}
#menu ul li ul li a {
border-top-color:#000000;
padding:0px 0px;
}
#menu ul li ul li a:hover {
border-top-color:#000000;
position:relative;
}