Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Problema con menu

Estas en el tema de Problema con menu en el foro de Jquery en Foros del Web. Buenos días, tengo este código: <script> smoothScroll.init({ selector: '[data-scroll]', // Selector for links (must be a class, ID, data attribute, or element tag) selectorHeader: null, ...
  #1 (permalink)  
Antiguo 27/02/2018, 04:52
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 90
Antigüedad: 8 años, 9 meses
Puntos: 1
Problema con menu

Buenos días, tengo este código:
<script>
smoothScroll.init({
selector: '[data-scroll]', // Selector for links (must be a class, ID, data attribute, or element tag)
selectorHeader: null, // Selector for fixed headers (must be a valid CSS selector) [optional]
speed: 1500, // Integer. How fast to complete the scroll in milliseconds
easing: 'easeInOutCubic', // Easing pattern to use
offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
callback: function ( anchor, toggle ) {} // Function to run after scrolling
});
</script>
<script>
$(document).ready(function(){
$(".nav-link").click(function () {
$('.navbar-toggler').click();
});
});

</script>
<title>Turibamba</title>

<style>
html, body{
height: 100vh;
}

.slider-inicio{
background:url("imagenes/fondo1.jpg");
height: 100vh;
background-size: cover;
background-position: center;
}
.fondo-galeria1{
background:url("imagenes/back5.jpg");
height: 100vh;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<!-- Menú -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<a data-scroll class="navbar-brand" href="#inicio">
<img src="imagenes/logo.png" width="30px" height="30px" class="d-inline-block align-top" alt="Turibamba Ocio"/>Turibamba</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto text-center">
<li class="nav-item active">
<a data-scroll class="nav-link" href="#inicio">Inicio</span></a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#cumpleaños">Cumpleaños</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#animaciones">Animaciones</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#despedidas">Despedidas</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#nosotras">Nosotras y el parque</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#galeria">Galería</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#tarifas">Tarifas</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#contacto">Contacto</a>
</li>
</ul>
</div>
</nav>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/smooth-scroll.min.js"></script>
</body>
</html>

Este script:

$(".nav-link").click(function () {
$('.navbar-toggler').click();
});
es para que cuando pulses en las tres rayitas que se ponen cuando el menú está escondido, desaparezca el menú. Pues bien, con bootstrap 3 me funciona perfecto y con bootstrap 4 no. Ya le he cambiado el navbar-toggle por navbar-toggler, pero ni aún así. Gracias.
  #2 (permalink)  
Antiguo 27/02/2018, 07:25
Avatar de alvaro_trewhela  
Fecha de Ingreso: octubre-2012
Ubicación: localhost
Mensajes: 970
Antigüedad: 7 años
Puntos: 111
Respuesta: Problema con menu

Por que no haces eso con css puro?
  #3 (permalink)  
Antiguo 27/02/2018, 08:38
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 90
Antigüedad: 8 años, 9 meses
Puntos: 1
Respuesta: Problema con menu

Es que lo vi tan fácil y con tan pocas líneas de código... Y no sé tanto CSS como para hacerlo
  #4 (permalink)  
Antiguo 28/02/2018, 04:26
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 90
Antigüedad: 8 años, 9 meses
Puntos: 1
Respuesta: Problema con menu

Os pongo de nuevo el código. No encuentro solución. Gracias

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     $(".navbar-nav li a").click(function () {
  3.             $('.navbar-toggler').click();
  4.              
  5.     });
  6. });
Y ahora el menú

Código HTML:
Ver original
  1. <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
  2.   <a data-scroll class="navbar-brand" href="#inicio">
  3.   <img src="imagenes/logo.png" width="30px" height="30px" class="d-inline-block align-top" alt="Turibamba Ocio"/>Turibamba</a>
  4.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  5.     <span class="navbar-toggler-icon"></span>
  6.   </button>
  7.  
  8.   <div class="collapse navbar-collapse" id="navbarSupportedContent">
  9.     <ul class="navbar-nav mr-auto text-center">
  10.       <li class="nav-item active">
  11.         <a data-scroll class="nav-link" href="#inicio" id="inicio">Inicio</span></a>
  12.       </li>
  13.       <li class="nav-item">
  14.         <a data-scroll class="nav-link" href="#cumpleaños">Cumpleaños</a>
  15.       </li>
  16.       <li class="nav-item">
  17.         <a data-scroll class="nav-link" href="#animaciones">Animaciones</a>
  18.       </li>
  19.        <li class="nav-item">
  20.         <a data-scroll class="nav-link" href="#despedidas">Despedidas</a>
  21.       </li>
  22.        <li class="nav-item">
  23.         <a data-scroll class="nav-link" href="#nosotras">Nosotras y el parque</a>
  24.       </li>
  25.        <li class="nav-item">
  26.         <a data-scroll class="nav-link" href="#galeria">Galería</a>
  27.       </li>
  28.       <li class="nav-item">
  29.         <a data-scroll class="nav-link" href="#tarifas">Tarifas</a>
  30.       </li>
  31.        <li class="nav-item">
  32.         <a data-scroll class="nav-link" href="#contacto">Contacto</a>
  33.       </li>
  34.     </ul>
  35.   </div>
  36. </nav>
  #5 (permalink)  
Antiguo 28/02/2018, 13:09
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 90
Antigüedad: 8 años, 9 meses
Puntos: 1
Respuesta: Problema con menu

Ya lo he resuelto. Os digo: he tenido que poner los jquery.min.js al principio de la página. Y luego este script:

Código Javascript:
Ver original
  1. <script>
  2.     $('.navbar-nav>li>a').click(function(){
  3.         $('.navbar-collapse').collapse('hide');
  4.     });
  5. </script>

Etiquetas: html, javascript
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 05:29.