Hola a todos!
Construyendo un menú que se vuelva responsive me he dado cuenta de lo siguiente: Cuando lo muestro, siempre me hace scroll hacia arriba y no entiendo por qué.
El código es el siguiente:
Código HTML:
Ver original <img src="imagenes/logo.png"/> <div class="acciona-menu"> <a href="#" class="despliega-mobile" id="despliega-mobile"><span>Men
ú</span><img src="imagenes/menu.png"/></a> <li><img class="logo-menu" id="logo-menu" src="imagenes/icon-chic.png"/></li> <li><a href="#cooperativa">Cooperativa
</a></li> <li><a href="#servicios">Servicios
</a></li> <li><a href="#socios">Socios
</a></li> <li><a href="#contacto">Contacto
</a></li>
Y el CSS:
Código CSS:
Ver original/*Menu Responsive*/
.acciona-menu{width:40%;height:auto;display:block;text-align:center;position:absolute;right:0;top:10px;}
.acciona-menu a{color:#585858;margin:0 5px;}
.acciona-menu a img{margin: 0 auto 0 5px;vertical-align:bottom;}
.menu{float:none;height:auto;}
.menu ul{height:auto;max-height:0;overflow:hidden;background:url('imagenes/menu-movil.png')repeat;}
.menu ul li{display:block;padding:0;width:100%;}
.menu ul li:first-child{display:none;}
.menu ul li a{color:#FFF;}
.menu ul.open-responsive-menu{width:100%;max-height:400px;transition: max-height .5s;position:absolute;left:0;top:0;}
.menu.nav-active{opacity: 1;}
.menu-fijo{position:relative;}
Ahora, cuando se lanza el evento este de jQuery, el cual solamente añado o quito la clase:
Código Javascript
:
Ver original$(document).ready(function(){
var myTrigger = $('#despliega-mobile');
var menu = $('.menu').find('ul');
myTrigger.stop().click(function(){
var pulsado = $(this);
pulsado.toggleClass('nav-active');
menu.toggleClass('open-responsive-menu');
});
});
Al pulsar, se me va hacia arriba y no entiendo por qué