Hola, estoy tratando de implementar un menu bootstrap con la clase collapse, pero no consigo que me funcione. Al cargar la pagina desde el movil el menu se despliega pero al clicar en el enlace el menu permanece abierto, en lugar de cerrarse automaticamente.
Tampoco consigo que funcione el scroll, la pagina se desplaza instantaneamente.
La pagina en cuestion se puede ver aqui (en construccion): www.f1losdominguitos.com/stg Solo tiene operativo el enlace de login del menu, el cual deberia desplazarnos suavemente hasta la zona de inicio de sesion.
Lo curioso es que en una plantilla que me he descargado si que funciona correctamente, y a pesar de que intento implementarla igual, no me funciona. Dicha plantilla que funciona esta aqui: www.f1losdominguitos.com/promo.
Agradeceria cualquier ayuda, seguro que es una tonteria pero me esta desquiciando un poquito :)
Gracias y saludos.
Respuestas
Buenos días.
Debes incluir el javascript "js/creative.js" que es el encargado de realizar justamente eso que pides. Puedes incluirlo justo debajo de bootstrap.js.
Para realizar el scroll debes ponerle la clase page-scroll a los enlaces dentro del menú, así el script sabrá que lo que quieres hacer es scroll y te llevará a la página indicada.
// jQuery for page scrolling feature - requires jQuery Easing plugin $('a.page-scroll').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: ($($anchor.attr('href')).offset().top - 50) }, 1250, 'easeInOutExpo'); event.preventDefault(); });
Y con este código, se cierra el menú una vez pulsado el enlace
// Closes the Responsive Menu on Menu Item Click $('.navbar-collapse ul li a').click(function() { $('.navbar-toggle:visible').click(); });
Un saludo.
@SoutlinK
Muchas gracias por tu respuesta, pero me sigue sin funcionar. He incluido en el head el script que me indicas, junto con las demas dependencias:
<script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/creative.js"></script> <script src="js/jquery.easing.min.js"></script> <script src="js/jquery.fittext.js"></script> <script src="js/wow.min.js"></script>
El fichero esta ubicado en su lugar, pero aun asi he probado tambien a incluir el codigo javascript tal cual me lo has pegado, pero no va.
y este es el codigo del menu:
<nav class="navbar navbar-default navbar-fixed-top" style="margin:0;" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <!--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">--> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Desplegar navegación</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <span class="navbar-brand"><b>F1 LOS DOMINGUITOS</b></span> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-left"> <li><a class="page-scroll" href="#">Inicio</a></li> <li><a class="page-scroll" href="#">Foro</a></li> <li><a class="page-scroll" href="#">Escuderías</a></li> <li><a class="page-scroll" href="#">Clasificación</a></li> <li> </li> <li><a class="page-scroll" href="#dcha">Login</a></li> </ul> </div> </div> </nav>
@doberk
Buenos días. El problema es que tienes un error en la consola de javascript
Uncaught TypeError: $(...).fitText is not a function
Esto te está diciendo que no encuentra la funcion fitText. Para solucionarlo o bien incluyes la libreria jquery.fitText o bien comentas las siguientes lineas en el creative.js
// Fit Text Plugin for Main Header $("h1").fitText( 1.2, { minFontSize: '35px', maxFontSize: '65px' } );
Un saludo
@SoutlinK
Muchas gracias por tu tiempo SoutlinK, pero sigue fallando. He comentado las lineas que me indicas pero no hay diferencia en el comportamiento.
Edito:
Finalmente he podido resolverlo añadiendo esta funcion:
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
La funcion la he introducido en el creative.js
Aun me quedaria resolver el tema del scroll, que por algun motivo tampoco funciona.
@doberk
Hola @doberk
Sigues teniendo un error de javascript
Uncaught ReferenceError: WOW is not defined
No tienes incluida la librería WOW. Esta librería se usa para lanzar efectos de css a medida que se hace scroll.
O bien incluyes la librería o comentas la linea
// Initialize WOW.js Scrolling Animations new WOW().init();
@SoutlinK
He procedido tambien a comentarla, porque he visto que es comercial. Pero de todas maneras no ocurre nada.
Me sorprende que la ausencia de estas librerias pueda ser la que provoque el fallo, porque como te decia al principio del hilo, esta otra pagina utiliza las mismas librerias y las mismas clases, y sin embargo funciona perfectamente sin añadir javascript adicional ni comentar nada del codigo:
http://www.f1losdominguitos.com/promo
De nuevo gracias por tu tiempo.
@doberk
Tu no tenias las librerías añadidas (al menos al momento de ver el código). Ahora las tienes añadidas pero en mal orden. Estas incluyendo primero el creative.js y luego las librerías necesarias. Cuando se carga el creative.js llama a las librerías, pero como estas no están cargadas da error.
Fijate en la web original
<!-- http://www.f1losdominguitos.com/promo/ --> <!-- jQuery --> <!--<script src="js/jquery.js"></script>--> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <!-- Plugin JavaScript --> <script src="js/jquery.easing.min.js"></script> <script src="js/jquery.fittext.js"></script> <script src="js/wow.min.js"></script> <!-- Custom Theme JavaScript --> <script src="js/creative.js"></script> </body> </html>
Y tu no las añades en tu web pero no en orden:
<!-- Javascript --> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/creative.js"></script> <script src="js/jquery.easing.min.js"></script> <script src="js/jquery.fittext.js"></script> <script src="js/wow.min.js"></script
Además te recomiendo que lleves la carga de javascript a la parte baja de la web, como hace la plantilla orignal, justo antes del