Estoy llamando de esta manera de HTML:
Código:
y el archivo Js es el Siguiente:<link href="Imagenes/flor_mini.png" rel="shortcut icon" /> <link href="csshana.css" rel="stylesheet" type="text/css" /> <script src="menu.js" type="text/javascript"></script> </head>
Código:
// JavaScript Document $(document).ready(function() { 04 05 /* Menú con reflejo ----------------------------------------------- */ 06 07 // Agregar un SPAN a cada LI para añadir el reflejo 08 09 $("#nav-reflection li").append("<span></span>"); 10 11 // Animar los botones, mover el reflejo y atenuarlo 12 13 $("#nav-reflection a").hover(function() { 14 $(this).stop().animate({ marginTop: "-10px" }, 200); 15 $(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200); 16 },function(){ 17 $(this).stop().animate({ marginTop: "0px" }, 300); 18 $(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300); 19 }); 20 21 /* Menú con Sombra ----------------------------------------------- */ 22 23 // Agregar la imagen de la sombra a cada LI 24 25 $("#nav-shadow li").append('<img class="shadow" src="imageness/menu_sb.png" width="81" height="27" alt="" />'); 26 27 // Animar los botones, y encoger y atenuar la sombra 28 29 $("#nav-shadow li").hover(function() { 30 var e = this; 31 $(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() { 32 $(e).find("a").animate({ marginTop: "-10px" }, 250); 33 }); 34 $(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250); 35 },function(){ 36 var e = this; 37 $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() { 38 $(e).find("a").animate({ marginTop: "0px" }, 250); 39 }); 40 $(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0px", opacity: 1 }, 250); 41 }); 42 43 // Fin jQuery