Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/10/2012, 06:11
manguiti
 
Fecha de Ingreso: junio-2007
Ubicación: Cádiz
Mensajes: 369
Antigüedad: 17 años, 6 meses
Puntos: 7
Menú desplegable con JQuery

Hola a todos, estoy aprendiendeo JQuery y quiero hacer un menú desplegable parecido al que hay en el lateral del panel de administración de wordpress. El caso es que consigo que aparezca y desaparezcan los submenu al ponerme sobre los ítems principales, pero si muevo rapido el ratón se apilan los efectos generando una especie de efecto acordeon, supongo que habrá algun metodo para o linea para que sólo ejecute un submenu en una sola vez o algo parecido, os paso el código y toda ayuda será bienvenida:

Código HTML:
Ver original
  1. <style type="text/css">
  2.  
  3.     #pagina{
  4.         width=100%;
  5.         margin: 0 auto;
  6.         padding: 0px;
  7.         background-color: #333;
  8.         overflow: hidden;
  9.     }
  10.     #menu{
  11.         position: relative;
  12.         float: left;
  13.         width: 20%;
  14.         background-color: #892;
  15.     }
  16.    
  17.     #marco{
  18.         position: relative;
  19.         float: left;
  20.         margin-left: 20px;
  21.         width: 70%;
  22.         background-color:#729;
  23.     }
  24.  
  25.     #menu ul{
  26.         width: 220px;
  27.         background-color: #333;
  28.         list-style: none;
  29.         display: block;
  30.         padding: 0px;
  31.         margin:0px;
  32.     }
  33.  
  34.     #menu ul li{
  35.         width: 200px;
  36.         position: relative;
  37.         float: left;
  38.         background-color: #415;
  39.         margin: 0px  2px 2px 0px;
  40.         color:#fff;
  41.     }
  42.  
  43.     #menu ul li ul{
  44.         background-color: #138;
  45.         width:200px;
  46.         margin: 0px 0px 0px 0px;
  47.         padding: 0px;
  48.         display: none;
  49.     }
  50.  
  51.     #menu ul li ul li{
  52.         width:200px;
  53.         background-color: #138;
  54.         margin: 0px 0px 0px 0px;
  55.         padding:5px 0px 5px 0px;
  56.     }
  57.     </style>
  58.     <!-- JQuery -->
  59.     <script type="text/javascript">
  60.         $().ready(function(){
  61.            
  62.             //Cuando pasemos por encima, muestro el submenu.
  63.             $('ul li').mouseover(function(){
  64.                 //alert('Coge el evento');
  65.                 $(this).children().each(function(e){
  66.                     $(this).slideDown('slow');
  67.                     return false;
  68.                 });
  69.             });
  70.  
  71.             //Al quitar el raton de el, lo oculto
  72.             $('ul li').mouseout(function(){
  73.                 $(this).children().each(function(e){
  74.                     $(this).slideUp('slow');
  75.                     return false;
  76.                 });
  77.             });
  78.         });
  79.     </script>
  80.  
  81. <div id="menu">
  82.             <h2>Menu</h2>
  83.             <ul>
  84.                 <li>Noticias
  85.                     <ul class="subMenu">
  86.                         <li>Añadir Noticia</li>
  87.                         <li>Todas las Noticias</li>
  88.                         <li>Fuentes</li>
  89.                         <li>Moderación</li>
  90.                     </ul>
  91.                 </li>
  92.                 <li>Artículos
  93.                     <ul class="subMenu">
  94.                         <li>Añadir Artículo</li>
  95.                         <li>Todos los Artículos</li>
  96.                         <li>Colaboradores</li>
  97.                         <li>Moderación</li>
  98.                     </ul>
  99.                 </li>
  100.  
  101.                 <li>Editoriales
  102.                     <ul class="subMenu">
  103.                         <li>Añadir Editorial</li>
  104.                         <li>Todas las Editoriales</li>
  105.                         <li>Moderación</li>
  106.                     </ul>
  107.                 </li>
  108.  
  109.                 <li>Actividades
  110.                     <ul class="subMenu">
  111.                         <li>Añadir Actividad</li>
  112.                         <li>Todas las Actividades</li>
  113.                     </ul>
  114.                 </li>
  115.  
  116.                 <li>Webs de interés
  117.                     <ul class="subMenu">
  118.                         <li>Añadir Web de interés</li>
  119.                         <li>Todas las Webs de interés</li>
  120.                     </ul>
  121.                 </li>
  122.  
  123.                 <li>Clientes
  124.                     <ul class="subMenu">
  125.                         <li>Añadir Cliente</li>
  126.                         <li>Todos los Clientes</li>
  127.                     </ul>
  128.                 </li>
  129.  
  130.                 <li>Gestión Envíos
  131.                     <ul class="subMenu">
  132.                         <li>Crear Newsletter</li>
  133.                         <li>Realizar envío</li>
  134.                         <li>Todos los envíos</li>
  135.                     </ul>
  136.                 </li>  
  137.                    
  138.                
  139.             </ul>
  140.         </div>