Menú desplegable con jquery
Hola gente, que tal, estoy realizando un menú desplegable con jquery, y el codigo que he metido es este:
Gracias y salu2
$(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
Puntos
1857
Visitas
Visitas
7
Resp
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
Puntos
Por alber hace 109 meses
Administrador
Respuesta #2
el css es este...
0
Puntos
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
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
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
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
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
Puntos
Por alber hace 109 meses
Administrador
Respuesta #6
Mil gracias alber, te debo una
5
Puntos
Puntos
Por borch hace 109 meses
Avanzado
Respuesta #7
alber dijo:buen aporte alber, cierro tema.. saludos a los 2
prueba a hacerlo como se explica en esta guía https://datoweb.com/post/2320-menu-con-animacion-desplegable-en-jquery