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>