Tema: Complejo Jquery me parte la cabeza HELP
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 09/11/2010, 00:38
bkolores
 
Fecha de Ingreso: mayo-2008
Ubicación: Santiago-Chile
Mensajes: 253
Antigüedad: 16 años, 7 meses
Puntos: 1
Respuesta: Complejo Jquery me parte la cabeza HELP
agregue las librerias jquery y jquery.easing.1.3 y la consola de errores dice esto

Jquery is not defined y al hacer click me selecciona eso help
jQuery.easing['jswing'] = jQuery.easing['swing'];


Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Documento sin título</title>
  6.  
  7. <style>
  8. ul.sdt_menu{
  9.     margin:0;
  10.     padding:0;
  11.     list-style: none;
  12.     font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
  13.     font-size:14px;
  14.     width:1020px;
  15. }
  16. ul.sdt_menu a{
  17.     text-decoration:none;
  18.     outline:none;
  19. }
  20. ul.sdt_menu li{
  21.     float:left;
  22.     width:170px;
  23.     height:85px;
  24.     position:relative;
  25.     cursor:pointer;
  26. }
  27. ul.sdt_menu li > a{
  28.     position:absolute;
  29.     top:0px;
  30.     left:0px;
  31.     width:170px;
  32.     height:85px;
  33.     z-index:12;
  34.     background:transparent url(http://www.mastercafe.com/ejemplos/slideboxmenu/images/overlay.png) no-repeat bottom right;
  35.     -moz-box-shadow:0px 0px 2px #000 inset;
  36.     -webkit-box-shadow:0px 0px 2px #000 inset;
  37.     box-shadow:0px 0px 2px #000 inset;
  38. }
  39. ul.sdt_menu li a img{
  40.     border:none;
  41.     position:absolute;
  42.     width:0px;
  43.     height:0px;
  44.     bottom:0px;
  45.     left:85px;
  46.     z-index:100;
  47.     -moz-box-shadow:0px 0px 4px #000;
  48.     -webkit-box-shadow:0px 0px 4px #000;
  49.     box-shadow:0px 0px 4px #000;
  50. }
  51. ul.sdt_menu li span.sdt_wrap{
  52.     position:absolute;
  53.     top:25px;
  54.     left:0px;
  55.     width:170px;
  56.     height:60px;
  57.     z-index:15;
  58. }
  59. ul.sdt_menu li span.sdt_active{
  60.     position:absolute;
  61.     background:#111;
  62.     top:85px;
  63.     width:170px;
  64.     height:0px;
  65.     left:0px;
  66.     z-index:14;
  67.     -moz-box-shadow:0px 0px 4px #000 inset;
  68.     -webkit-box-shadow:0px 0px 4px #000 inset;
  69.     box-shadow:0px 0px 4px #000 inset;
  70. }
  71. ul.sdt_menu li span span.sdt_link,
  72. ul.sdt_menu li span span.sdt_descr,
  73. ul.sdt_menu li div.sdt_box a{
  74.     margin-left:15px;
  75.     text-transform:uppercase;
  76.     text-shadow:1px 1px 1px #000;
  77. }
  78. ul.sdt_menu li span span.sdt_link{
  79.     color:#fff;
  80.     font-size:24px;
  81.     float:left;
  82.     clear:both;
  83. }
  84. ul.sdt_menu li span span.sdt_descr{
  85.     color:#0B75AF;
  86.     float:left;
  87.     clear:both;
  88.     width:155px; /*For dumbass IE7*/
  89.     font-size:10px;
  90.     letter-spacing:1px;
  91. }
  92. ul.sdt_menu li div.sdt_box{
  93.     display:block;
  94.     position:absolute;
  95.     width:170px;
  96.     overflow:hidden;
  97.     height:170px;
  98.     top:85px;
  99.     left:0px;
  100.     display:none;
  101.     background:#000;
  102. }
  103. ul.sdt_menu li div.sdt_box a{
  104.     float:left;
  105.     clear:both;
  106.     line-height:30px;
  107.     color:#0B75AF;
  108. }
  109. ul.sdt_menu li div.sdt_box a:first-child{
  110.     margin-top:15px;
  111. }
  112. ul.sdt_menu li div.sdt_box a:hover{
  113.     color:#fff;
  114. }
  115. body { background-color:#000; }
  116. </style>
  117.  
  118.  
  119. </head>
  120.  
  121. <body>
  122.     <div class="content">
  123.  
  124.             <h1 class="title">Slide Down Box Menu with jQuery and CSS3</h1>
  125.  
  126.             <ul id="sdt_menu" class="sdt_menu">
  127.  
  128.                 <li>
  129.  
  130.                     <a href="#">
  131.  
  132.                         <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/2.jpg" alt=""/>
  133.  
  134.                         <span class="sdt_active"></span>
  135.  
  136.                         <span class="sdt_wrap">
  137.  
  138.                             <span class="sdt_link">About me</span>
  139.  
  140.                             <span class="sdt_descr">Get to know me</span>
  141.  
  142.                         </span>
  143.  
  144.                     </a>
  145.  
  146.                 </li>
  147.  
  148.                 <li>
  149.  
  150.                     <a href="#">
  151.  
  152.                         <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/1.jpg" alt=""/>
  153.  
  154.                         <span class="sdt_active"></span>
  155.  
  156.                         <span class="sdt_wrap">
  157.  
  158.                             <span class="sdt_link">Portfolio</span>
  159.  
  160.                             <span class="sdt_descr">My work</span>
  161.  
  162.                         </span>
  163.  
  164.                     </a>
  165.  
  166.                     <div class="sdt_box">
  167.  
  168.                             <a href="#">Websites</a>
  169.  
  170.                             <a href="#">Illustrations</a>
  171.  
  172.                             <a href="#">Photography</a>
  173.  
  174.                     </div>
  175.  
  176.                 </li>
  177.  
  178.                 <li>
  179.  
  180.                     <a href="#">
  181.  
  182.                         <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/2.jpg" alt=""/>
  183.  
  184.                         <span class="sdt_active"></span>
  185.  
  186.                         <span class="sdt_wrap">
  187.  
  188.                             <span class="sdt_link">Inspiration</span>
  189.  
  190.                             <span class="sdt_descr">Where ideas get born</span>
  191.  
  192.                         </span>
  193.  
  194.                     </a>
  195.  
  196.                 </li>
  197.  
  198.                 <li>
  199.  
  200.                     <a href="#">
  201.  
  202.                         <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/4.jpg" alt=""/>
  203.  
  204.                         <span class="sdt_active"></span>
  205.  
  206.                         <span class="sdt_wrap">
  207.  
  208.                             <span class="sdt_link">Photos</span>
  209.  
  210.                             <span class="sdt_descr">I like to photograph</span>
  211.  
  212.                         </span>
  213.  
  214.                     </a>
  215.  
  216.                 </li>
  217.  
  218.                 <li>
  219.  
  220.                     <a href="#">
  221.  
  222.                         <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/5.jpg" alt=""/>
  223.  
  224.                         <span class="sdt_active"></span>
  225.  
  226.                         <span class="sdt_wrap">
  227.  
  228.                             <span class="sdt_link">Blog</span>
  229.  
  230.                             <span class="sdt_descr">I write about design</span>
  231.  
  232.                         </span>
  233.  
  234.                     </a>
  235.  
  236.                 </li>
  237.  
  238.                 <li>
  239.  
  240.                     <a href="#">
  241.  
  242.                         <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/6.jpg" alt=""/>
  243.  
  244.                         <span class="sdt_active"></span>
  245.  
  246.                         <span class="sdt_wrap">
  247.  
  248.                             <span class="sdt_link">Projects</span>
  249.  
  250.                             <span class="sdt_descr">I like to code</span>
  251.  
  252.                         </span>
  253.  
  254.                     </a>
  255.  
  256.                     <div class="sdt_box">
  257.  
  258.                         <a href="#">Job Board Website</a>
  259.  
  260.                         <a href="#">Shopping Cart</a>
  261.  
  262.                         <a href="#">Interactive Maps</a>
  263.  
  264.                     </div>
  265.  
  266.                 </li>
  267.  
  268.             </ul>
  269.  
  270.         </div>
  271.  
  272.  
  273.  
  274.  
  275. <script src="http://www.mastercafe.com/ejemplos/slideboxmenu/jquery.easing.1.3.js" language="javascript"></script>
  276. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  277. <script type="text/javascript">
  278.  
  279.             $(function() {
  280.  
  281.                 /**
  282.  
  283.                 * for each menu element, on mouseenter, 
  284.  
  285.                 * we enlarge the image, and show both sdt_active span and 
  286.  
  287.                 * sdt_wrap span. If the element has a sub menu (sdt_box),
  288.  
  289.                 * then we slide it - if the element is the last one in the menu
  290.  
  291.                 * we slide it to the left, otherwise to the right
  292.  
  293.                 */
  294.  
  295.                 $('#sdt_menu > li').bind('mouseenter',function(){
  296.  
  297.                     var $elem = $(this);
  298.  
  299.                     $elem.find('img')
  300.  
  301.                          .stop(true)
  302.  
  303.                          .animate({
  304.  
  305.                             'width':'170px',
  306.  
  307.                             'height':'170px',
  308.  
  309.                             'left':'0px'
  310.  
  311.                          },400,'easeOutBack')
  312.  
  313.                          .andSelf()
  314.  
  315.                          .find('.sdt_wrap')
  316.  
  317.                          .stop(true)
  318.  
  319.                          .animate({'top':'140px'},500,'easeOutBack')
  320.  
  321.                          .andSelf()
  322.  
  323.                          .find('.sdt_active')
  324.  
  325.                          .stop(true)
  326.  
  327.                          .animate({'height':'170px'},300,function(){
  328.  
  329.                         var $sub_menu = $elem.find('.sdt_box');
  330.  
  331.                         if($sub_menu.length){
  332.  
  333.                             var left = '170px';
  334.  
  335.                             if($elem.parent().children().length == $elem.index()+1)
  336.  
  337.                                 left = '-170px';
  338.  
  339.                             $sub_menu.show().animate({'left':left},200);
  340.  
  341.                         }   
  342.  
  343.                     });
  344.  
  345.                 }).bind('mouseleave',function(){
  346.  
  347.                     var $elem = $(this);
  348.  
  349.                     var $sub_menu = $elem.find('.sdt_box');
  350.  
  351.                     if($sub_menu.length)
  352.  
  353.                         $sub_menu.hide().css('left','0px');
  354.  
  355.                     
  356.  
  357.                     $elem.find('.sdt_active')
  358.  
  359.                          .stop(true)
  360.  
  361.                          .animate({'height':'0px'},300)
  362.  
  363.                          .andSelf().find('img')
  364.  
  365.                          .stop(true)
  366.  
  367.                          .animate({
  368.  
  369.                             'width':'0px',
  370.  
  371.                             'height':'0px',
  372.  
  373.                             'left':'85px'},400)
  374.  
  375.                          .andSelf()
  376.  
  377.                          .find('.sdt_wrap')
  378.  
  379.                          .stop(true)
  380.  
  381.                          .animate({'top':'25px'},500);
  382.  
  383.                 });
  384.  
  385.             });
  386.  
  387.         </script>
  388.  
  389.  
  390.  
  391. </body>
  392. </html>
__________________
Si Crees que puedes o no, en ambos casos tienes Razón. (H. Ford).


http://img710.imageshack.us/img710/1...developers.gif