menú con jquery y css

blogphpd · #1 (**permalink**) 05/06/2012, 21:41

¿cómo hago que en vez de hacer clic aparezca el div, sino que con solo pasar el mouse aparezca el div?

Código:

<!DOCTYPE html>
<html>
<head>
<title>Ayuda TodoExpertos.com - @JuanGarciaR</title>
<script src="http://bphpd.comlu.com/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#mostrar').click(function(){
$('#capa').toggle('slow').css('display','block');
});
});
</script>
<style type="text/css">
#preferencias{width: 22px; height: 22px; float: right; margin: 0px 5px 0px 0px}
#crearcontenido{width: 22px; height: 22px; float: right; margin: 0px 5px 0px 0px}
#mensajes{width: 22px; height: 22px; float: right; margin: 0px 0px 0px 0px}
#nombre{ float: right; margin: 0px 0px 0px 0px}
#salir{width: 22px; height: 22px; float: right; 0px 5px 0px 0px}

#capa{
position: absolute;
display: none;
background: #330000;
}
ul,li{
list-style: none;
}
</style>
</head>
<body>

	<div id="nombre">
	<a href="http://localhost/bphpd/admin/">
		<em>Adri&aacute;n</em> <em>Olmedo</em>
	</a> 
	<a href="/bphpd/index.php?doLogout=true">
		<img src="http://localhost/bphpd/archivos/logout.png" width="22" height="22" title="Salir" />
	</a>
	</div>
	
	<div id="mensajes">
	<a class="Estilo1" href="http://localhost/bphpd/admin/mensajes/">
		<img src="http://localhost/bphpd/archivos/inbox.png" width="22" height="22" border="0" title="Bandeja de Entrada" />
	</a>
	</div>
	
	<div id="crearcontenido">
	<a class="Estilo1" href="http://localhost/bphpd/admin/crearcontenido/">
		<img src="http://localhost/bphpd/archivos/filenew.png" width="22" height="22" border="0" title="Crear un Contenido Nuevo" />
	</a> 
	</div>
	
	<div id="preferencias">
	<a href="#" id="mostrar">
		<img src="http://localhost/bphpd/archivos/preferences_system.png" title="Preferencias del Blog" />
	</a>
			<div align="justify" id="capa">
				<ul>
					<li>
					<a href="#">SubMenú 1</a>
					</li>
					<li>
					<a href="#">SubMenú 2</a>
					</li>
					<li>
					<a href="#">SubMenú 3</a>
					</li>
				</ul>
			</div>
	</div> 
	
	
	</body>
</html>

Bokoa · #2 (**permalink**) 06/06/2012, 00:32

Creo que deberías leer tu código atentamente, ahí encontrarás la respuesta.

blogphpd · #3 (**permalink**) 06/06/2012, 15:54

al final creo que lo puede acomodar quedó así

Código:

<!DOCTYPE html>

<html>

<head>

<title>Ayuda TodoExpertos.com - @JuanGarciaR</title>

<script src="http://bphpd.comlu.com/jquery.min.js" type="text/javascript"></script>

<script>

$(this.document).ready(function(){

$('#preferencias').mouseover(function(){

			displayOptions($(this).find('#menuPreferencias'));

				});

$('#crearcontenido').mouseover(function(){

			displayOptions($(this).find('#menuCrearcontenido'));

				});

$('#preferencias').mouseout(function(){

				hideOptions($(this));

				});

$('#crearcontenido').mouseout(function(){

				hideOptions($(this));

				});

				

});



//funcion que MUESTRA todos los elementos del menu

function displayOptions(e){

	e.show();

}



//funcion que OCULTA los elementos del menu

function hideOptions(e){

	e.find('#menuPreferencias').hide();

	e.find('#menuCrearcontenido').hide();

	e.find('#preferencias').show();

	e.find('#crearcontenido').show();

}

</script>

<style type="text/css">

#preferencias{width: 22px; height: 22px; float: right; margin: 0px 5px 0px 0px;}

#crearcontenido{width: 22px; height: 22px; float: right; margin: 0px 5px 0px 0px}

#mensajes{width: 22px; height: 22px; float: right; margin: 0px 0px 0px 0px}

#nombre{ float: right; margin: 0px 0px 0px 0px}

#salir{width: 22px; height: 22px; float: right; 0px 5px 0px 0px}



#menuPreferencias{

position: absolute;

display: none;

background: #330000;

}

#menuCrearcontenido{

position: absolute;

display: none;

background: #330000;

}

ul,li{

font-family: "Trebuchet MS"; color: #FFFFFF; font-size: 14px;

list-style: none;

}

</style>

</head>

<body>



	<div id="nombre">

	<a href="http://localhost/bphpd/admin/">

		<em>Adri&aacute;n</em> <em>Olmedo</em>

	</a> 

	<a href="/bphpd/index.php?doLogout=true">

		<img src="http://localhost/bphpd/archivos/logout.png" width="22" height="22" title="Salir" />

	</a>

	</div>

	

	<div id="mensajes">

	<a class="Estilo1" href="http://localhost/bphpd/admin/mensajes/">

		<img src="http://localhost/bphpd/archivos/inbox.png" width="22" height="22" border="0" title="Bandeja de Entrada" />

	</a>

	</div>

	

	<div id="crearcontenido">

	<a class="Estilo1" href="http://localhost/bphpd/admin/crearcontenido/">

		<img src="http://localhost/bphpd/archivos/filenew.png" width="22" height="22" border="0" title="Crear un Contenido Nuevo" />

	</a> 

			<div align="justify" id="menuCrearcontenido">

					<li>

					<a href="#">Entrada</a>

					</li>

					<li>

					<a href="#">Descarga</a>

					</li>

					<li>

					<a href="#">Albúm de Fotos</a>

					</li>

				</ul>

			</div>

	</div>

	

	<div id="preferencias">

	<a href="#">

		<img src="http://localhost/bphpd/archivos/preferences_system.png" title="Preferencias del Blog" />

	</a>

			<div align="justify" id="menuPreferencias">

					<li>

					<a href="#">Notas Personales</a>

					</li>

					<li>

					<a href="#">Cajas</a>

					</li>

					<li>

					<a href="#">Contenidos</a>

					</li>

					<li>

					<a href="#">Usuarios</a>

					</li>

				</ul>

			</div>

	</div> 

	

	

	</body>

</html>