Ver Mensaje Individual
  #3 (permalink)  
Antiguo 06/06/2012, 15:54
blogphpd
 
Fecha de Ingreso: junio-2012
Mensajes: 5
Antigüedad: 12 años, 6 meses
Puntos: 1
Respuesta: menú con jquery y css

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>