Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/04/2014, 01:29
Avatar de madman_18
madman_18
 
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 14 años, 3 meses
Puntos: 14
Pregunta Evitar Scroll al hacer menú responsive

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
  1. <header class="cabecera">            
  2.             <div class="contenedor">
  3.                 <article class="logotipo">
  4.                     <img src="imagenes/logo.png"/>
  5.                 </article>                
  6.             </div>
  7.             <div class="acciona-menu">
  8.                 <a href="#" class="despliega-mobile" id="despliega-mobile"><span>Men&uacute;</span><img src="imagenes/menu.png"/></a>                
  9.             </div>            
  10.             <nav class="menu">
  11.                 <ul>
  12.                     <li><img class="logo-menu" id="logo-menu" src="imagenes/icon-chic.png"/></li>
  13.                     <li><a href="#cooperativa">Cooperativa</a></li>
  14.                     <li><a href="#servicios">Servicios</a></li>
  15.                     <li><a href="#socios">Socios</a></li>
  16.                     <li><a href="#contacto">Contacto</a></li>
  17.                     <div class="limpia"></div>
  18.                 </ul>
  19.             </nav>            
  20.         </header>
Y el CSS:
Código CSS:
Ver original
  1. /*Menu Responsive*/
  2.     .acciona-menu{width:40%;height:auto;display:block;text-align:center;position:absolute;right:0;top:10px;}    
  3.     .acciona-menu a{color:#585858;margin:0 5px;}    
  4.     .acciona-menu a img{margin: 0 auto 0 5px;vertical-align:bottom;}
  5.     .menu{float:none;height:auto;}
  6.     .menu ul{height:auto;max-height:0;overflow:hidden;background:url('imagenes/menu-movil.png')repeat;}
  7.     .menu ul li{display:block;padding:0;width:100%;}
  8.     .menu ul li:first-child{display:none;}
  9.     .menu ul li a{color:#FFF;}
  10.     .menu  ul.open-responsive-menu{width:100%;max-height:400px;transition: max-height .5s;position:absolute;left:0;top:0;}
  11.     .menu.nav-active{opacity: 1;}
  12.     .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
  1. $(document).ready(function(){
  2.                var myTrigger = $('#despliega-mobile');
  3.                 var menu = $('.menu').find('ul');              
  4.                 myTrigger.stop().click(function(){
  5.                     var pulsado = $(this);
  6.                     pulsado.toggleClass('nav-active');
  7.                     menu.toggleClass('open-responsive-menu');
  8.                 });
  9.             });

Al pulsar, se me va hacia arriba y no entiendo por qué
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"