Tema: Efecto rollover en menu con Jquery?
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 13/05/2011, 17:05
Dany_s
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 15 años
Puntos: 65
Respuesta: Efecto rollover en menu con Jquery?
sacas el float left de la lista, el tamaño de alto del div #efecto lo podés poner del mismo tamaño que el de las opciones asi ubicás el dibujo donde quieras para no tener que andar calculando entonces lo decis que se mueva a la posición top del li

Código Javascript: 
Ver original
  1. <html>
  2.     <head>
  3.         <title>Ejemplo</title>
  4.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  5.         <script>
  6.  
  7.             $( function(){
  8.  
  9.                     lista = $('#menu li');
  10.  
  11.                     lista.mouseover( function(){
  12.                         mover($(this));
  13.                     }).click( function(){
  14.                         lista.removeClass('seleccionado');
  15.                         $(this).addClass('seleccionado');
  16.                     });
  17.  
  18.                     $('#menu ul').mouseleave( function(){
  19.                         mover($('#menu li.seleccionado'));
  20.                     });
  21.  
  22.                     $('#menu li.seleccionado').trigger('mouseover');
  23.  
  24.                     function mover(li){
  25.                         var mover = li.offset().top;
  26.                         $('#efecto').stop().animate({'top':mover}, 500);
  27.                     }
  28.  
  29.             });
  30.  
  31.  
  32.  
  33.     </script>
  34.  
  35.     <style>
  36.  
  37.     body {
  38.         margin:50px
  39.     }
  40.  
  41.     #menu{
  42.         background:#ccc;
  43.         width: 150px
  44.     }
  45.  
  46.     #menu ul {
  47.         list-style:none;
  48.         margin:0;
  49.         padding:0;
  50.     }
  51.  
  52.     #menu li {
  53.         padding:10px;
  54.         width:100px;
  55.         height: 50px;
  56.         text-align:center;
  57.         position:relative;
  58.         cursor:pointer;
  59.     }
  60.  
  61.     #efecto {
  62.         position:absolute;
  63.         width:50px;
  64.         height:50px;
  65.         margin-left: 35px;
  66.     }
  67.  
  68.     #menu .seleccionado{
  69.         font-weight:600
  70.     }
  71.  
  72.     </style>
  73.  
  74. </head>
  75. <body>
  76.  
  77.     <div id="menu">
  78.         <div id="efecto">
  79.             <img src="http://www.gloriacalero.com/wp-content/uploads/2010/07/button-9458.png" />
  80.         </div>
  81.         <ul>
  82.             <li class="seleccionado">Uno</li>
  83.             <li>Dos</li>
  84.             <li>Tres</li>
  85.             <li>Cuatro</li>
  86.         </ul>
  87.     </div>
  88.  
  89. </body>
  90. </html>


porqué no mejor usar el plugin que te pasó masterpuppet?

hay varios ejemplos http://nixboxdesigns.com/projects/jq.../original.html