elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Sigue las noticias más importantes de seguridad informática en el Twitter! de elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Aporte] Menus Elasticos 		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Aporte] Menus Elasticos  (Leído 1,684 veces)
AFelipeTrujillo

Desconectado Desconectado

Mensajes: 160



Ver Perfil WWW
[Aporte] Menus Elasticos
« en: 21 Junio 2010, 03:21 am »
Esta la forma de implementar un menu elástico:

Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7.  
  8. 	<title>Menu Elastico</title>	
  9.  
  10. 	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
  11. 	<!-- Llamamos a JQuery en uno de los repositorios de Google -->
  12. 	<script type="text/javascript">
  13. 		$(document).ready(function(){
  14. 			$('.menuitem img').animate({width: 100}, 0);
  15. 			$('.menuitem').mouseover(function(){
  16. 					gridimage = $(this).find('img');
  17. 					gridimage.stop().animate({width: 200}, 150);
  18. 				}).mouseout(function(){
  19. 					gridimage.stop().animate({width: 100}, 150);
  20. 			});
  21. 		}); 
  22. 	</script>
  23.  
  24. 	<style type="text/css">
  25. 		*{ padding:0px; margin:0px; }
  26. 		img{ border: none; -ms-interpolation-mode: bicubic; }
  27. 		body{ padding:10px; text-align:center; background:#fafafa; }
  28.  
  29. 		#wrapper{ position:absolute; left:20%; padding-top:100px; width:650px;}
  30.  
  31. 		#menuwrapper{ position:relative; height:210px;}
  32. 		#menu{position:absolute; bottom:0; left:0;}
  33. 	 .menuitem{ position:fixed relative; bottom:0px; display:inline-block; }
  34.  
  35.  
  36. 	</style>
  37.  
  38. </head>
  39.  
  41. 	<div id="wrapper">
  42. 		<div id="menuwrapper">
  43. 			<div id="menu">
  44. 				<a href="icons.jpg" class="menuitem"><img src="icons.jpg"></a>
  45. 				<a href="neattext.jpg" class="menuitem"><img src="neattext.jpg"></a>
  46. 				<a href="officeal.jpg" class="menuitem"><img src="officeal.jpg"></a>
  47. 				<a href="curtain.jpg" class="menuitem"><img src="curtain.jpg"></a>
  48. 				<a href="rebrand.jpg" class="menuitem"><img src="rebrand.jpg"></a>
  49. 			</div>
  50. 		</div>
  51.  
  52. 	</div>
  53.  
  54. </body>
  55. </html>

Ejemplo

FUENTE 1

FUENTE 2
En línea
C0mUnidAd C0dif|cad4.C0M
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines