[Aporte] Menus Elasticos

AFelipeTrujillo · 21 Junio 2010, 03:21 AM

Esta la forma de implementar un menu elástico:

Código (html4strict) [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Menu Elastico</title>	
	
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
	<!-- Llamamos a JQuery en uno de los repositorios de Google -->
	<script type="text/javascript">
		$(document).ready(function(){
			$('.menuitem img').animate({width: 100}, 0);
			$('.menuitem').mouseover(function(){
					gridimage = $(this).find('img');
					gridimage.stop().animate({width: 200}, 150);
				}).mouseout(function(){
					gridimage.stop().animate({width: 100}, 150);
			});
		}); 
	</script>
	
	<style type="text/css">
		*{ padding:0px; margin:0px; }
		img{ border: none; -ms-interpolation-mode: bicubic; }
		body{ padding:10px; text-align:center; background:#fafafa; }
		
		#wrapper{ position:absolute; left:20%; padding-top:100px; width:650px;}
		
		#menuwrapper{ position:relative; height:210px;}
		#menu{position:absolute; bottom:0; left:0;}
	 .menuitem{ position:fixed relative; bottom:0px; display:inline-block; }
				
		
	</style>
	
</head>

<body>
	<div id="wrapper">
		<div id="menuwrapper">
			<div id="menu">
				<a href="icons.jpg" class="menuitem"><img src="icons.jpg"></a>
				<a href="neattext.jpg" class="menuitem"><img src="neattext.jpg"></a>
				<a href="officeal.jpg" class="menuitem"><img src="officeal.jpg"></a>
				<a href="curtain.jpg" class="menuitem"><img src="curtain.jpg"></a>
				<a href="rebrand.jpg" class="menuitem"><img src="rebrand.jpg"></a>
			</div>
		</div>
	
	</div>
	
</body>
</html>

Ejemplo

FUENTE 1

FUENTE 2

Test Foro de elhacker.net SMF 2.1

[Aporte] Menus Elasticos

AFelipeTrujillo