Autor Tema: Menus Elasticos  (Leído 280 veces)

4ng3r

  • Moderador
  • Mensajes: 145
    • Ver Perfil
    • 4ng3r Blog
    • Email
Menus Elasticos
« : mayo 08, 2010, 12:33:26 pm »
Bueno esto fue de desparche por aca en la universidad espero que les gusten.... me hace falta subirle el archivo funcionando hasta que D-M-K me regale el espacisito y lo monto hay pero por ahora le dejo el codigo:


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>

Hay se los adjunto para que lo revisen con las imagenes !!!

4ng3r

  • Moderador
  • Mensajes: 145
    • Ver Perfil
    • 4ng3r Blog
    • Email
Re: Menus Elasticos
« Respuesta #1 : mayo 10, 2010, 11:55:49 am »
Este es el ejemplo funcionando... salu2

Menu Elastico

Str4ng3letS

  • E=mc²
  • Administrador
  • Mensajes: 344
  • S-Lozano
    • MSN Messenger - stynky_xp4rky3x@hotmail.com
    • Ver Perfil
    • F1s1c0-H4ck3r
Re: Menus Elasticos
« Respuesta #2 : mayo 10, 2010, 03:24:07 pm »
jaja, esto me recuerda a MacOsX :P, muy bacano parce, ud siempre con sus codigo bonitos :D

4ng3r

  • Moderador
  • Mensajes: 145
    • Ver Perfil
    • 4ng3r Blog
    • Email
Re: Menus Elasticos
« Respuesta #3 : mayo 10, 2010, 03:56:21 pm »
jejeje tkxx??

Str4ng3letS

  • E=mc²
  • Administrador
  • Mensajes: 344
  • S-Lozano
    • MSN Messenger - stynky_xp4rky3x@hotmail.com
    • Ver Perfil
    • F1s1c0-H4ck3r
Re: Menus Elasticos
« Respuesta #4 : mayo 10, 2010, 06:56:21 pm »

[D-m-K]

  • Administrador
  • Mensajes: 229
  • [-.|.-]
    • MSN Messenger - d4rk.m0nk3y@hotmail.com
    • Ver Perfil
    • Red Informatica Colombiana
    • Email
Re: Menus Elasticos
« Respuesta #5 : mayo 10, 2010, 07:40:57 pm »
Vea pues que c
:: Todas las grandes cosas que se disfrutan son el producto de las pequeñas cosas que se logran ::

4ng3r

  • Moderador
  • Mensajes: 145
    • Ver Perfil
    • 4ng3r Blog
    • Email
Re: Menus Elasticos
« Respuesta #6 : mayo 10, 2010, 09:04:40 pm »
[quote author=E=mc

Str4ng3letS

  • E=mc²
  • Administrador
  • Mensajes: 344
  • S-Lozano
    • MSN Messenger - stynky_xp4rky3x@hotmail.com
    • Ver Perfil
    • F1s1c0-H4ck3r
Re: Menus Elasticos
« Respuesta #7 : mayo 11, 2010, 11:26:54 am »

4ng3r

  • Moderador
  • Mensajes: 145
    • Ver Perfil
    • 4ng3r Blog
    • Email
Re: Menus Elasticos
« Respuesta #8 : mayo 11, 2010, 01:33:52 pm »
[quote author=E=mc