Foros del Web » Programando para Internet » Jquery »

DIVS desplegables bajo un mismo DIV

Estas en el tema de DIVS desplegables bajo un mismo DIV en el foro de Jquery en Foros del Web. Buenos días, Ante todo como siempre, daros las gracias por la ayuda recibida. Gracias a este foro nos hemos ahorrado muchas horas de quebraderos de ...
  #1 (permalink)  
Antiguo 03/07/2014, 01:12
 
Fecha de Ingreso: febrero-2013
Ubicación: Madrid
Mensajes: 25
Antigüedad: 6 años, 9 meses
Puntos: 0
DIVS desplegables bajo un mismo DIV

Buenos días,

Ante todo como siempre, daros las gracias por la ayuda recibida. Gracias a este foro nos hemos ahorrado muchas horas de quebraderos de cabeza.

Al lío, tengo una página con varios divs horizontales y abajo del todo de la página tengo un div que hace de menu horizontal. El objetivo es que al pulsar cualquier botón de ese menú, aparezcan y desaparezcan submenus debajo. Solo puede aparecer un submenu (de tamaño idéntico al menú original) a la vez.

He conseguido que funcione, pero no sé si he tocado algo o es problema de librerías o qué, que cuando pulso un enlace del menú, la página hace como si se recargase y el scroll se va al comienzo de la página.

Espero que me podáis ayudar, por favor.

Mi código:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function($){


$( "#lk_1" ).click(function() {
$( "#submenu2" ).slideUp( "slow", function(){});
$( "#submenu3" ).slideUp( "slow", function(){});
$( "#submenu4" ).slideUp( "slow", function(){});
$( "#submenu" ).slideDown( "slow", function(){});

});
$( "#lk_2" ).click(function() {
$( "#submenu" ).slideUp( "slow", function(){});
$( "#submenu3" ).slideUp( "slow", function(){});
$( "#submenu4" ).slideUp( "slow", function(){});
$( "#submenu2" ).slideDown( "slow", function(){});

});
$( "#lk_3" ).click(function() {
$( "#submenu" ).slideUp( "slow", function(){});
$( "#submenu2" ).slideUp( "slow", function(){});
$( "#submenu4" ).slideUp( "slow", function(){});
$( "#submenu3" ).slideDown( "slow", function(){});

});
$( "#lk_4" ).click(function() {
$( "#submenu" ).slideUp( "slow", function(){});
$( "#submenu2" ).slideUp( "slow", function(){});
$( "#submenu3" ).slideUp( "slow", function(){});
$( "#submenu4" ).slideDown( "slow", function(){});

});
});
</script>

<title>MAKERS - ADMINISTRACION</title>
<style media="screen">
html, body {
margin: 0;
padding: 0;
/*height: 100%;
width: 100%;
min-height: 100%;
height: auto !important;*/
font-family:Helvetica;
text-align:center;

}
.esconder
{
display: none;
}

/************************************************** *****CONTENEDOR GENERAL**********************/
#container-page {
width: 100%;
min-height: 100%;
height: auto !important;
height:100%;
background: #fff;
margin: 0 auto -41px;

}



#menu-altern
{
color:#FFFFFF;
width:589px;
height:35px;*/
/*box-shadow: 1px 2px 1px rgba(0,0,0,.3); */
font-family:Ubuntu,Trebuchet, Arial, Helvetica, sans-serif;
/*z-index:999;*/
text-align:center;
border-radius:4px;
/*font-size:90%;*/
text-align:center;
width:1583px;
margin:0 auto;
}

#menu-altern ul
{
text-align: center;
clear: both;
float: left;
list-style: none;
margin: 0;
align: center;
z-index:999;
}

#menu-altern ul li
{
float:left;
height:90px;
line-height:40px;
background:#666;
cursor:pointer;
border-right:1px solid #999;
}
#menu-altern ul li
{
height:90px;
}

#menu-altern ul li a.lk_1
{
width:344px;
max-width:344px;
}

#menu-altern ul li a.lk_2
{
width:440px;
}
#menu-altern ul li a.lk_3
{
width:328px;
}
#menu-altern ul li a.lk_4
{
width:344px;
}

#menu-altern ul li a
{
display:block;
text-decoration:none;
color:#fff;
position:relative;
}

#submenu
{
color:#FFFFFF;
width:589px;
height:35px;*/
/*box-shadow: 1px 2px 1px rgba(0,0,0,.3); */
font-family:Ubuntu,Trebuchet, Arial, Helvetica, sans-serif;
/*z-index:999;*/
text-align:center;
border-radius:4px;
/*font-size:90%;*/
text-align:center;
width:1583px;
margin:0 auto;
}

#submenu ul
{
text-align: center;
clear: both;
float: left;
list-style: none;
margin: 0;
align: center;
z-index:999;
}

#submenu ul li
{
float:left;
height:90px;
line-height:90px;
background:#222;
cursor:pointer;
border-right:1px solid #999;
}
#submenu ul li
{
height:90px;
}

#submenu ul li a.sub_1
{
width:344px;
max-width:344px;
}

#submenu ul li a.sub_2
{
width:440px;
}
#submenu ul li a.sub_3
{
width:328px;
}
#submenu ul li a.sub_4
{
width:344px;
}

#submenu ul li a
{
display:block;
text-decoration:none;
color:#fff;
position:relative;
}

#submenu2
{
color:#FFFFFF;
/* width:589px;
height:35px;*/
/*box-shadow: 1px 2px 1px rgba(0,0,0,.3); */
font-family:Ubuntu,Trebuchet, Arial, Helvetica, sans-serif;
/*z-index:999;*/
text-align:center;
border-radius:4px;
/*font-size:90%;*/
text-align:center;
width:1583px;
margin:0 auto;
}

#submenu2 ul
{
text-align: center;
clear: both;
float: left;
list-style: none;
margin: 0;
align: center;
z-index:999;
}

#submenu2 ul li
{
float:left;
height:90px;
line-height:90px;
background:#666;
cursor:pointer;
border-right:1px solid #999;
}
#submenu2 ul li
{
height:90px;
}

#submenu2 ul li a.sub_1
{
width:344px;
max-width:344px;
}

#submenu2 ul li a.sub_2
{
width:440px;
}
#submenu2 ul li a.sub_3
{
width:328px;
}
#submenu2 ul li a.sub_4
{
width:344px;
}

#submenu2 ul li a
{
display:block;
text-decoration:none;
color:#fff;
position:relative;
}


#menubkg{

height:auto;
position: absolute;
}

</style>

</head>
<body>
<div id="container-page">
<div id="wrap">
<div id="cabecera" >
<img src="imagenes_web/webs/a1.png" />
</div>
<div id="slider" >
<img src="imagenes_web/webs/b1.png" />
</div>
<div id="shadow_slider" >
<img src="imagenes_web/webs/c1.png" />
</div>
<div id="menubkg">
<div id="menu-altern">
<ul>
<li><a href="" class="lk_1" id="lk_1">Main 1</a></li>
<li><a href="" class="lk_2" id="lk_2">Opina y sugiere</a></li>
<li><a href="" class="lk_3" id="lk_3">Entradas CMC</a></li>
<li> <a href="" class="lk_4" id="lk_4">Pagina principal</a></li>
</ul>
</div>
<div id="submenu" style="display:none;">
<ul>
<li><a href="#" class="sub_1">Main 1</a></li>
<li><a href="#" class="sub_2">Opina y sugiere</a></li>
<li><a href="#" class="sub_3">Entradas CMC</a></li>
<li> <a href="#" class="sub_4">Pagina principal</a></li>
</ul>
</div>
<div id="submenu2" style="display:none;">
<ul>
<li><a href="#" class="sub_1">Main 1</a></li>
<li><a href="#" class="sub_2">Opina y sugiere</a></li>
<li><a href="#" class="sub_3">Entradas CMC</a></li>
<li> <a href="#" class="sub_4">Pagina principal</a></li>
</ul>
</div>
<div id="submenu3" style="display:none;" >
<ul>
<li><a href="#" class="sub_1">Main 1</a></li>
<li><a href="#" class="sub_2">Opina y sugiere</a></li>
<li><a href="#" class="sub_3">Entradas CMC</a></li>
<li> <a href="#" class="sub_4">Pagina principal</a></li>
</ul>
</div>
<div id="submenu4" style="display:none;" >
<ul>
<li><a href="#" class="sub_1">Main 1</a></li>
<li><a href="#" class="sub_2">Opina y sugiere</a></li>
<li><a href="#" class="sub_3">Entradas CMC</a></li>
<li> <a href="#" class="sub_4">Pagina principal</a></li>
</ul>
</div>
</div>
</div>
</div>



</body>
</html>
  #2 (permalink)  
Antiguo 03/07/2014, 03:06
 
Fecha de Ingreso: enero-2008
Ubicación: Málaga - España
Mensajes: 346
Antigüedad: 11 años, 11 meses
Puntos: 13
Respuesta: DIVS desplegables bajo un mismo DIV

Yo no entiendo muy bien que quieres decir, pero por lo pronto....

AQUI:
<div id="menu-altern">
<ul>
<li><a href="" class="lk_1" id="lk_1">Main 1</a></li>
<li><a href="" class="lk_2" id="lk_2">Opina y sugiere</a></li>
<li><a href="" class="lk_3" id="lk_3">Entradas CMC</a></li>
<li> <a href="" class="lk_4" id="lk_4">Pagina principal</a></li>
</ul>
</div>

Te faltan en el href="" la #

<div id="menu-altern">
<ul>
<li><a href="#" class="lk_1" id="lk_1">Main 1</a></li>
<li><a href="#" class="lk_2" id="lk_2">Opina y sugiere</a></li>
<li><a href="#" class="lk_3" id="lk_3">Entradas CMC</a></li>
<li> <a href="#" class="lk_4" id="lk_4">Pagina principal</a></li>
</ul>
</div>
  #3 (permalink)  
Antiguo 03/07/2014, 04:14
 
Fecha de Ingreso: junio-2014
Mensajes: 9
Antigüedad: 5 años, 5 meses
Puntos: 0
Respuesta: DIVS desplegables bajo un mismo DIV

Si pudieras poner el codigo entre las balizas html que propone el foro cuando escribes un mensaje seria mas lisible para todos

Etiquetas: desplegables, divs, funcion, html, javascript, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:39.