Ocultar y desaparecer menu con css y capas

kahlito · #1 (**permalink**) 28/01/2004, 15:19

¿Es posible hacer aparecer y desaparecer este menu dinámico hecho con css y a la vez poder pinchar en los enlaces?

http://www.terra.es/personal9/karhli...ndomenucss.htm

Tengo la imagen y luego el menu dentro de una capa oculta y lo que quiero es que al pasar sobre la imagen de arriba (Punto) me aparezca el menu hecho en css y luego al quitar el raton pues que desaparezca.

Lo he intentado con Onmouseout pero lo que hace es desaparecer si salgo del entorno de la imagen Punto y así no me deja pinchar sobre los enlaces del menu, tambien lo he intentado metiendo una imagen oculta que ocupe todo el ancho y alto del menú para darle las propiedades OnmouseOver y OnmouseOut pero llegan a chocar y aunque me lo muestra y me lo oculta luego no me deja el menu disponible para pinchar en los enlaces

¿Se puede arreglar con css?

Cain · #2 (**permalink**) 28/01/2004, 16:57

El truco está en poner el menú en alguna etiqueta, lo más típico es una lista:

<ul id="menu">
<li>Apartado 1</li>
<li>Apartado 2</li>
...
</ul>

Esto crea una lista con las opciones.

Luego, usas CSS para darle la apariencia que quieras a ul#menu i pones display: block;

Para ocultarlo, haces una función Javascript que haga:

document.getElementById("menu").style.display = 'none';

Para mostrarlo de nuevo:

document.getElementById("menu").style.display = 'block';

kahlito · #3 (**permalink**) 29/01/2004, 06:43

Hola Cain, lo he intentado de varias maneras y no me termina de salir con las funciones de javascript, estoy bien pegado en javascript

</head>

<script language="JavaScript" type="text/JavaScript">
function ocultar() {
document.getElementById("menu").style.display = 'none';
}
function mostrar(){
document.getElementById("menu").style.display = 'block';
}
</script>

<style>ul#menu{
display: block;
list-style-type : none;
visibility: hidden;
}
</style>

<style>
A.menulink {
display: block;
width: 80px;
text-align: center;
text-decoration: none;
font-family:arial;
font-size:11px;
color: #ffffff;
border: solid 1px #FFFFFF;
background-color:#000066;
}

A.menulink:hover {
display: block;
border: 1px dashed #6100C1;
background-color:#000066;
color: #ffffcc;
text-align:center;
}
</style>

<body>

<ul id="menu">
<li><a href="furgonetas.htm"class="menulink">Apartado 1</a></li>
<li><a href="ofertas.htm" class="menulink">Apartado 2</a></li>
</ul>

<a href="#" onMouseOver="document.getElementById("menu").style .display = 'block';" onMouseOut="document.getElementById("menu").style. display = 'none';">
<img src="botonarribapunto.gif" width="90" height="18" border="0"></a>

</body>
</html>

jercer · #4 (**permalink**) 29/01/2004, 06:52

Tienes puesto:

="document.getElementById("menu").style.display = 'block';"

reemplaza "menu" por 'menu'

kahlito · #5 (**permalink**) 29/01/2004, 07:39

Gracias jercer ya lo he corrigido y ahora si me sale lo de las funciones

Pero ahora que me fijo al final me hace lo mismo que antes, al pasar el ratón por la imagen me muestra este nuevo menú y al quitarlo me lo quita y así no me deja entrar en los enlacesa del menu:

http://www.terra.es/personal9/karhli...delistasul.htm

¿Te referias a eso Cain o no te he entendido bien?

Un saludo

jercer · #6 (**permalink**) 30/01/2004, 04:40

yo pondria la funcion de desaparecer cuando salga con un tiempo con setTimeOut y lo del onmuseover que muestre el menu, tambien lo pondría en el menu para que cuando se mueva por este no desaparezca.

kahlito · #7 (**permalink**) 30/01/2004, 04:47

Es cierto jercer no hay caido en eso, ahora que lo dices voy a probarlo de inmediato a ver que tal me va

Gracias un saludo

kahlito · #8 (**permalink**) 30/01/2004, 12:53

Hola de nuevo, la verdad es que no logro colocar esa función settimeOut:

<script language="JavaScript" type="text/JavaScript">
function ocultar() {
document.getElementById('menu').style.display = 'none';
setTimeout("ocultar()", 1000);
}
function mostrar(){
document.getElementById('menu').style.display = 'block';
}
</script>

Luego en el body:

<body onload="document.getElementById('menu').style.disp lay = 'none';">
<a href="javascript:;" onMouseOver="document.getElementById('menu').style .display = 'block';" onMouseOut="document.getElementById('menu').style. display = 'none';">

Y no me funciona

¿Que estoy haciendo mal?

caricatos · #9 (**permalink**) 30/01/2004, 13:31

Hola a todos:

Que tal paisa... ¿Te sirvió el truco del centrado...?

Mira, si pones dentro de la función ocultar el setTimeout("ocultar()"... ) te metes en un bucle infinito... No me fijé bien en el código, pero me parece que el setTimeout tendrías que ubicarlo en "mostrar"...

prueba esto:

function ocultar() {
document.getElementById('menu').style.display = 'none';
}
function mostrar(){
document.getElementById('menu').style.display = 'block';
setTimeout("ocultar()", 1000);
}

Saludos

kahlito · #10 (**permalink**) 30/01/2004, 13:46

Buenas caricatos

, pues si que me sirvio el truco de centrar imagenes

Y bueno he seguido tu consejo para este post y sigue sin funcionarme

Un saludo

caricatos · #11 (**permalink**) 30/01/2004, 13:57

Hola otra vez:

El árbol me tapó el bosque...

También tienes una falta muy grave en el tag body:

Cuando pones onmouseout... (display = 'none')
Ya no tiene sentido el "over"...

La idea principal de este tipo de menús es que se active desde algo concreto, ya sea pulsando un botón o pasando sobre algún elemento, pero con display none o visibility hidden pasan a estar fuera de control.

No sé si es lo que quieres, pero en ves de display none/block, para estos casos creo que es conveniente visibility hidden/visible, con position: absolute... pero como no sé muy bien lo que quieres no me hagas demasiado caso.

Saludos

kahlito · #12 (**permalink**) 31/01/2004, 08:49

Hola caricatos, aquí estoy otra vez

, bueno sigo intentando pero no consigo aun hacer del todo bien lo que quiero, por eso aqui voy a dejar el enlace antiguo y el enlace nuevo donde estoy intentando hacer el nuevo menu.

Este es el antiguo un menu generado por Dreamweaver que creo que pesa demasiado y tarda mucho en cargar:

http://www.terra.es/personal9/karhli...nuevopanda.htm

Y aquí esta lo que estoy intentando hacer ahora, este otro que es lo mismo pero con algo de css y javascript que creo que pesa mucho menos:

http://www.terra.es/personal9/karhli...ndomenucss.htm

Y bueno la diferencia es que si por ejemplo paso el ratón sobre el botón de seicento y me muestra debajo su menu, luego si me llevo el ratón a cualquier lugar de la pantalla sigue ahí, a no ser que lo pase por lo alto de los otros dos botones, mientras que en el primer ejemplo al no estar sobre ningun boton se quitan los menus automaticamente, no se si me habré explicado bien.

Un saludo.

caricatos · #13 (**permalink**) 31/01/2004, 13:32

Hola kahlito:

La verdad es que ese tipo de menú no lo implemente nunca (todo se andará), pero tal vez pueda ayudarte con ideas (para mí son mucho más valiosas)... de todos modos la implementación que puede hacer DW también estará basada en css y javascript.

Te paso un post de tunait (¡Hola

!) donde muestra un menú parecido pero con frames: http://www.forosdelweb.com/showthrea...highlight=menu y en su página www.javascript.tunait.com (creo... lo pongo de memoria) hay algunos ejemplos de menús.

Como ella ha currado el tema, no creo que le importe que te envíe a su página (aprovecho para felicitarla

)

Saludos

kahlito · #14 (**permalink**) 01/02/2004, 07:02

Buenas de nuevo caricatos

Pues con eso de las ideas estoy contigo, una de las cosas que intenté fue meter debajo de esos menús una imagen transparente o oculta y añadirle la propiedad de mostrar y ocultar el menu entrando y saliendo sobre ella, pero me chocaba el menu y no me dejaba pasar por encima del over, de todas formas seguiremos intentandolo

En cuanto al menu que hizo tunait con frames es buenisimo

, por cierto su página es http://javascript.tunait.com/javascript/ la cuál he visto varias veces y tiene muy buenos ejemplos, aprovecho tambien para fecilitarte tunait

Bueno seguiremos intentandolo, gracias a todos por vuestra ayuda

jercer · #15 (**permalink**) 02/02/2004, 05:12

Lo q yo suelo hacer cuando hago este tipo de menus, es hacer una variable global booleana que diga si el mouse esta sobre el ratón o no, de forma que si esta por encima, establezco esta variable a true y le pongo el estilo visible y si se va cargo el onmouesout="setTimeout('ocultar()', 1000)"; y pongo la variabla booleana a false y en ocultar pondria algo como si la variable es false (todavia) entonces oculta la capa. Esto evita que si el usuario entra y sale rápidamente se oculte la capa o haga cosas extrañas.

kahlito · #16 (**permalink**) 02/02/2004, 07:34

Buenas jercer, como verás en otros ejemplos intenté hacer algo con el settimeout y no me dio resultado, más que nada por que no se mucho de javascript

, de todas formas voy a ver que tal me sale esta vez

Gracias de nuevo

Un saludo