como poner un menú que aparezca y se oculta al pasar el mouse

jorgeeliesergu · #1 (**permalink**) 03/04/2013, 19:44

Hola amigos del foro soy novato en esto del HTML pero estoy tratando de crear mi web con ayuda de programas y tutoriales

lo que quiero es que si pueden me den el codigo html para crear un menu que aparezca al hacer rollover con el mouse en una parte y desaparezca al quitar el puntero del mouse

creo que ustedes ya saben de que se trata (por ejemplo el que esta en el menu arriba justo en esta pagina)

por favor ayudenme o sino me pueden dejar el codigo diganme como se hace
gracias

Triby · #2 (**permalink**) 03/04/2013, 20:33

En www.araudi.net, arriba a la derecha, encontrarás varios tipos de menús, analízalos y elige el que mejor se adapte a tus necesidades... el código? ahí está, sólo haz click con botón derecho y seleccionas "Ver código fuente".

Ember · #3 (**permalink**) 04/04/2013, 05:32

en esta página también puedes encontrar todo tipo de menús

http://www.dynamicdrive.com/

#4 (**permalink**) 05/04/2013, 06:52

Sólo con HTML no podrás hacerlo así que tendrás que añadir código JavaScript o usar alguna librería como JQuery. Yo hace tiempo hice una prueba para tener un elemento y que al posicionarte encima enseñe una serie de elementos, te puedo mostrar el código y luego tú lo puedes adaptar a tus necesidades.

Código HTML:

<html>
	<head>
		<title>Menu desplegable</title>
		<script src="jquery.js"></script>
		<script>
			$(document).ready(function() {
				$("#desplegar").css('display','none');	
				
				$("p").mouseenter(function() {
					$("#desplegar").show('slow');
				});
								
				$("p").mouseleave(function() {
					$("#desplegar").hide('slow');

				});
			});
		</script>
	</head>
	<body>
		<p>Menu</p>
		<ul id="desplegar">
			<li>Item1</li>
			<li>Item2</li>
			<li>Item3</li>
			<li>Item4</li>
		</ul>
	</body>
</html>

Cómo puedes ver en el body tengo una etiqueta <p> y una lista desordenada que contiene cuatro items.

En la parte del <script> debes agregar el archivo de JQuery que te lo puedes bajar desde su página.

En la segunda etiqueta <script> está escrito el código JQuery que lo que hace es lo siguiente:

Al cargar la página ocultará la lista <ul>:

Código:

$("#desplegar").css('display','none');

Cuando te posiciones encima de la etiqueta <p> mostrará la lista mediante un show.

Código:

$("p").mouseenter(function() {
	$("#desplegar").show('slow');
});

Cuando quites el ratón de encima de la etiqueta <p> volverá a ocultar la lista <ul>

Código:

$("p").mouseleave(function() {
	$("#desplegar").hide('slow');
});

Espero que este ejemplo te sirva de guía para lo que necesitas hacer :)

C2am · #5 (**permalink**) 05/04/2013, 22:16

Cita:

Iniciado por Bultack

Sólo con HTML no podrás hacerlo así que tendrás que añadir código JavaScript o usar alguna librería como JQuery...

Ok, tienes algo de razón, sólo con HTML no se puede, pero con html y css sí, tal como queda evidenciado en el enlace que da Triby.

Saludos