Menú desplegable con jquery

Hola gente, que tal, estoy realizando un menú desplegable con jquery, y el codigo que he metido es este:

$(document).ready(function(){
$("#id-boton").mouseover(function(){
$("nav.menuPrincipal .sub-menu").slideDown();
});
$("#id-boton").mouseout(function(){
$("nav.menuPrincipal .sub-menu").slideUp();
});
});

Aparentemente me lo hace bien, pero cuando voy a meter el ratón en el submenu me empieza a hacer cosas raras, me hace un bucle indefinido de la persiana, o sea que no puedo pulsar en los botones del submenu, alguien sabe porque me pasa esto??

Gracias y salu2

5
Puntos

1857
Visitas

7
Resp

Por borch hace 109 meses

Avanzado

Respuesta #1

buenas borch, deja el html y el css del menú para que podamos probarlo

0
Puntos

Por alber hace 109 meses

Administrador

Respuesta #2

el css es este...

0
Puntos

Por borch hace 109 meses

Avanzado

Respuesta #3

necesito hacerme una idea de como funciona el menu, con el jquery y el css no es posible, tienes que poner el código del menu y del css solo #id-boton y .sub-menu.

si quieres haz en una pagina en blanco una pequeña demo del menú utilizando solo el código necesario y trabajamos con esa pagina para solucionar el problema

0
Puntos

Por alber hace 109 meses

Administrador

Respuesta #4

Perdon alber, aqui te mando:

html:

<!DOCTYPE html>
<html lang="es-ES">
<head>

<link rel="stylesheet" type="text/css" media="all" href="css/style.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="js/efectos.js"></script>

</head>

<nav class="menuPrincipal">
<div class="menu-menu-principal-container"><ul id="menu-menu-principal" class="menu"><li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="#">Inicio</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-22"><a href="#">Cursos</a>
<ul style="display: none;" class="sub-menu">
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="#">Curso 1</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="#">Curso 2</a></li>
</ul>
</li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="#">Contacto</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="#">Blog</a></li>
</ul>
</div>
</nav>

</header>

</body>
</html>

css:

/*------------------para el menu---------------------------------*/

nav.menuPrincipal{
background: linear-gradient(#63253b, #290f18) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-bottom: 5px solid #4f972b;
height: 49px;
}
nav.menuPrincipal ul {
list-style: none;
margin: 0 0 0 -1px;
padding-left: 0;
list-style:none;
font-size: 23px;
list-style: outside none none;
padding-top: 7px;
}
nav.menuPrincipal li {
float: left;
position: relative;
}
nav.menuPrincipal a {
color: #fff;
display: block;
line-height: 35px;
padding: 0 12px;
text-decoration: none;
display: block;
font-size: 0.8em;
color:#FFF;
border-left: 0.1em solid #FFF;
font-weight:bold;
padding-left: 2em;
padding-right: 2em;
}
/* eliminamos los bordes del primer y el último*/
/*nav.menuPrincipal li:first-child a { border-right: 0.1em solid #FFF; }*/
nav.menuPrincipal li:last-child a{ border-right: 0.1em solid #FFF; }

nav.menuPrincipal a:hover{
/*background: #434343;*/
color:#F60;
-ms-transition:all 0.5s ease-out; /*el prefijo es para IE*/
-moz-transition:all 0.5s ease-out;/*para firefox*/
-o-transition:all 0.5s ease-out;/*para opera*/
-webkit-transition:all 0.5s ease-out;/*para crome y safari*/
transition:all 0.5s ease-out;
}
/*nav.menuPrincipal a:active{
color:red;
}*/
nav.menuPrincipal ul ul a {
line-height: 12px;
padding: 10px 10px;
width: 170px;
margin: 0 auto;
border-bottom: 1px dashed #1d1d1b;
}
nav.menuPrincipal li ul{
/*display:none;*/
position:absolute;
}
//nav.menuPrincipal li:hover > ul{
// display:block;
//}
nav.menuPrincipal li ul li{
position: relative;
}
nav.menuPrincipal li ul li ul{
right: -163px;
top:0px;
}
nav.menuPrincipal li ul li ul{
position: relative;
}
nav.menuPrincipal li ul li ul li{
right:2px;
top:-32px;
}

/*---------------------------------Para el Submenu--------------------------------------*/

nav.menuPrincipal .sub-menu{
border-radius: 0 0 5px 5px;
background: -moz-linear-gradient(#353539,#555);
background: -webkit-linear-gradient(#353539,#555);
background: -o-linear-gradient(#353539,#555);
background: -ms-linear-gradient(#353539,#555);
background: linear-gradient(#353539,#555);
overflow: hidden;
display: none;
/*margin-top: 7px;*/

}

nav.menuPrincipal .sub-menu li a{
border:none;
border-bottom: 1px dashed #1d1d1b;
margin:0 auto;
}

nav.menuPrincipal .sub-menu li:last-child a { border: none; } /*quito el ultimo borde del submenu*/

jquery:

$(document).ready(function(){
$("#menu-item-22").mouseover(function(){
$("nav.menuPrincipal .sub-menu").slideDown();
});
$("#menu-item-22").mouseout(function(){
$("nav.menuPrincipal .sub-menu").slideUp();
});
});

No se porque pero si metes el raton en el submenu hace el desplegable pero indefinidamente

Gracias y salu2

0
Puntos

Por borch hace 109 meses

Avanzado

Respuesta #5

prueba a hacerlo como se explica en esta guía https://datoweb.com/post/2320-menu-con-animacion-desplegable-en-jquery

0
Puntos

Por alber hace 109 meses

Administrador

Respuesta #6

Mil gracias alber, te debo una

5
Puntos

Por borch hace 109 meses