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. ¿Qué menú estás queriendo usar exactamente? Mikel....

  #91 (permalink)  
Antiguo 11/07/2008, 17:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 2 meses
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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

Mikel.
  #92 (permalink)  
Antiguo 12/07/2008, 09:53
Avatar de Bill Gates  
Fecha de Ingreso: abril-2005
Ubicación: En el baño
Mensajes: 261
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

el numero 3 ese quiero, gracias Mikmoro
__________________
MI CLANhttp://s5.bitefight.es/c.php?uid=86519]
  #93 (permalink)  
Antiguo 12/07/2008, 11:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 2 meses
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
  #94 (permalink)  
Antiguo 12/07/2008, 20:56
 
Fecha de Ingreso: mayo-2008
Mensajes: 499
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Menu desplegable 100% CSS

ami no me sale menu como le hago
  #95 (permalink)  
Antiguo 12/07/2008, 21:01
Avatar de Bill Gates  
Fecha de Ingreso: abril-2005
Ubicación: En el baño
Mensajes: 261
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Lo quisiera despues de este, abajo de la parte de arriba o en su caso antes de las columnas de izquierda o derecha
__________________
MI CLANhttp://s5.bitefight.es/c.php?uid=86519]
  #96 (permalink)  
Antiguo 13/07/2008, 03:30
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 14 años, 9 meses
Puntos: 770
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por iozk Ver Mensaje
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,
  #97 (permalink)  
Antiguo 13/07/2008, 12:12
 
Fecha de Ingreso: mayo-2008
Mensajes: 499
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Menu desplegable 100% CSS

hola no sale el menu numero 5 devo escribir las tablas en html??
  #98 (permalink)  
Antiguo 13/07/2008, 12:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 2 meses
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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

Mikel.
  #99 (permalink)  
Antiguo 13/07/2008, 13:07
 
Fecha de Ingreso: mayo-2008
Mensajes: 499
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Menu desplegable 100% CSS

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!!
  #100 (permalink)  
Antiguo 13/07/2008, 17:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 2 meses
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
  #101 (permalink)  
Antiguo 25/08/2008, 13:13
 
Fecha de Ingreso: enero-2008
Mensajes: 273
Antigüedad: 8 años, 11 meses
Puntos: 1
Respuesta: Menu desplegable 100% CSS

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!
  #102 (permalink)  
Antiguo 25/08/2008, 13:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 2 meses
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
__________________
Visita mi nueva web idplus.org
  #103 (permalink)  
Antiguo 25/08/2008, 14:46
 
Fecha de Ingreso: enero-2008
Mensajes: 273
Antigüedad: 8 años, 11 meses
Puntos: 1
Respuesta: Menu desplegable 100% CSS

Excelente!! ahora lo estoy leyendo medio por arribita, a primera vista parace Excelente la explicacion!
Un aporte Increible Mikel!!
  #104 (permalink)  
Antiguo 25/08/2008, 15:11
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.586
Antigüedad: 11 años, 2 meses
Puntos: 49
Respuesta: Menu desplegable 100% CSS

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...
__________________
Gokuh Salvo al mundo. PUNTO!!!!

Última edición por kaninox; 25/08/2008 a las 15:41
  #105 (permalink)  
Antiguo 26/08/2008, 10:47
Avatar de CaPaSe  
Fecha de Ingreso: agosto-2008
Ubicación: Guanajuato
Mensajes: 34
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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
  #106 (permalink)  
Antiguo 26/08/2008, 11:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 2 meses
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
__________________
Visita mi nueva web idplus.org
  #107 (permalink)  
Antiguo 26/08/2008, 12:10
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 2 meses
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por kaninox Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #108 (permalink)  
Antiguo 26/08/2008, 14:41
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.586
Antigüedad: 11 años, 2 meses
Puntos: 49
Respuesta: Menu desplegable 100% CSS

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
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #109 (permalink)  
Antiguo 26/08/2008, 17:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 2 meses
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
__________________
Visita mi nueva web idplus.org
  #110 (permalink)  
Antiguo 26/08/2008, 20:46
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.586
Antigüedad: 11 años, 2 meses
Puntos: 49
Respuesta: Menu desplegable 100% CSS

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 :)
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #111 (permalink)  
Antiguo 27/08/2008, 02:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 2 meses
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Pues no, no te entiendo en absoluto.
__________________
Visita mi nueva web idplus.org
  #112 (permalink)  
Antiguo 28/08/2008, 08:55
Avatar de CaPaSe  
Fecha de Ingreso: agosto-2008
Ubicación: Guanajuato
Mensajes: 34
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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

Última edición por CaPaSe; 29/08/2008 a las 08:38
  #113 (permalink)  
Antiguo 07/09/2008, 18:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 6 meses
Puntos: 538
Respuesta: Menu desplegable 100% CSS

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #114 (permalink)  
Antiguo 07/09/2008, 18:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 2 meses
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
__________________
Visita mi nueva web idplus.org
  #115 (permalink)  
Antiguo 07/09/2008, 18:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 6 meses
Puntos: 538
Respuesta: Menu desplegable 100% CSS

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #116 (permalink)  
Antiguo 07/09/2008, 18:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 2 meses
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
__________________
Visita mi nueva web idplus.org
  #117 (permalink)  
Antiguo 08/09/2008, 07:09
Avatar de EmpireFX  
Fecha de Ingreso: marzo-2008
Ubicación: in da house
Mensajes: 60
Antigüedad: 8 años, 9 meses
Puntos: 3
Respuesta: Menu desplegable 100% CSS

Che que lindo trabajito que te mandaste, ayuda mucho :)
Para el interesado que quiera ver mas menus ( http://www.cssplay.co.uk/menus/ )
Saludos
  #118 (permalink)  
Antiguo 08/09/2008, 09:46
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Excelente aporte mikmoro gracias por compartir!
  #119 (permalink)  
Antiguo 09/09/2008, 03:41
 
Fecha de Ingreso: septiembre-2008
Ubicación: Gran Canaria
Mensajes: 27
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Muchas gracias, la verdad que me viene como anillo al dedo
  #120 (permalink)  
Antiguo 16/09/2008, 03:11
 
Fecha de Ingreso: noviembre-2006
Mensajes: 117
Antigüedad: 10 años
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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;
}
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 16:13.