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
#pagina{
width=100%;
margin: 0 auto;
padding: 0px;
background-color: #333;
overflow: hidden;
}
#menu{
position: relative;
float: left;
width: 20%;
background-color: #892;
}
#marco{
position: relative;
float: left;
margin-left: 20px;
width: 70%;
background-color:#729;
}
#menu ul{
width: 220px;
background-color: #333;
list-style: none;
display: block;
padding: 0px;
margin:0px;
}
#menu ul li{
width: 200px;
position: relative;
float: left;
background-color: #415;
margin: 0px 2px 2px 0px;
color:#fff;
}
#menu ul li ul{
background-color: #138;
width:200px;
margin: 0px 0px 0px 0px;
padding: 0px;
display: none;
}
#menu ul li ul li{
width:200px;
background-color: #138;
margin: 0px 0px 0px 0px;
padding:5px 0px 5px 0px;
}
<!-- JQuery -->
<script type="text/javascript"> $().ready(function(){
//Cuando pasemos por encima, muestro el submenu.
$('ul li').mouseover(function(){
//alert('Coge el evento');
$(this).children().each(function(e){
$(this).slideDown('slow');
return false;
});
});
//Al quitar el raton de el, lo oculto
$('ul li').mouseout(function(){
$(this).children().each(function(e){
$(this).slideUp('slow');
return false;
});
});
});
<li>Todas las Noticias
</li> <li>Todos los Artículos
</li>
<li>Añadir Editorial
</li> <li>Todas las Editoriales
</li>
<li>Añadir Actividad
</li> <li>Todas las Actividades
</li>
<li>Añadir Web de interés
</li> <li>Todas las Webs de interés
</li>
<li>Todos los Clientes
</li>
<li>Crear Newsletter
</li> <li>Todos los envíos
</li>