1

Lo que quiero lograr es que cuando den clic dentro del menú de navegación en un enlace desaparezca ya que dan clic y el menú sigue en pantalla soy principiante en javascript y jquery he tomado algunos cursos pero todavía se me dificulta.

Con el código que les dejo me funciona en pantallas pequeñas pero una vez que se prueba en pantallas de escritorio al dar clic en un enlace desaparecen todos y eso no quiero alguna otra forma de hacerlo de antemano gracias…

Es un menú adaptable a pantallas pero si cuando se da clic en un enlace se sigue mostrando el menú en pantalla lo he modificado y funciona se oculta el menú, pero en pantallas de escritorio se sigue ocultando todo el menú del header al dar clic en un enlace y no quiero que siga ejecutando el código en pantallas de escritorio si quiero que se muestre el menú del header.

    
    //MENU PRNCIPAL 
    $(document).ready(function() {
      $('.menu-toggle, a').click(function() {
        $('nav').toggleClass('active')
      })
      var btnmenu = $('#btn-menu'),
        icono = $('#btn-menu .icono')

      btnmenu.on('click', function(e) {
        icono.toggleClass('icon-close');
        icono.toggleClass('icon-bars');
      });
    });

    //Este codigo esta de prueba
    $(window).on('resize', function() {
      if ($(this).width() > 800) {
        $('a').off();
      }
    });
/* MENU NAVEGACION========== */

    header {
      position: fixed;
      top: 0px;
      left: 0px;
      padding: 0px 20px;
      background: #1A252D;
      height: 60px;
      width: 100%;
      z-index: 999;
      box-sizing: border-box;
    }

    header .logo {
      display: none;
    }

    .logo_nav {
      display: block;
      height: 200px;
      width: auto;
      text-align: center;
      margin-bottom: 20px;
    }

    .logo_nav img {
      height: 100%;
      width: auto;
    }

    header nav {
      position: absolute;
      width: 100%;
      height: auto;
      background: #2A3B47;
      top: 60px;
      left: -100%;
      transition: 0.5s;
      display: flex;
      flex-direction: column;
    }

    header nav.active {
      left: 0px;
    }

    header nav ul {
      display: block;
      text-align: center;
      padding-left: 0px;
      margin: 0px;
    }

    header nav ul li {
      list-style: none;
      letter-spacing: 3px;
    }

    header nav ul li a {
      height: 60px;
      line-height: 50px;
      padding: 0px 15px;
      font-family: 'OpenSans-Regular';
      font-size: 14px;
      color: #ffffff;
      border-bottom: 1px solid rgba(0, 0, 0, .2);
      text-decoration: none;
      display: block;
      height: 50px;
    }

    header nav ul li a:hover,
    header nav ul li a.active {
      color: #ffffff;
      background: #2196f3;
    }

    .menu-toggle {
      color: #ffffff;
      float: right;
      font-size: 24px;
      line-height: 60px;
      cursor: pointer;
      display: block;
    }

    @media screen and (min-width:950px) {
      header {
        padding-left: 5%;
        padding-right: 5%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
      header .logo {
        position: relative;
        display: block;
        height: 60px;
        width: auto;
        margin: 0px;
        padding: 0px;
      }
      header .logo img {
        height: 100%;
        width: auto;
      }
      .logo_nav {
        display: none;
      }
      header nav {
        position: relative;
        background: #1A252D;
        width: auto;
        flex-direction: row;
        top: 0px;
        height: 60px;
        left: 100%;
        transition: 0s;
      }
      header nav ul {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
      }
      header nav ul li a {
        border-bottom: 0px;
        height: 60px;
        line-height: 60px;
      }
      .menu-toggle {
        display: none;
      }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- MENU DE NAVEGACION========== -->


    <header id="header" class="headroom">
      <figure class="logo">
        <img src="./img/cat-fish.png" alt="">
      </figure>
      <nav class="active">
        <figure class="logo_nav">
          <img src="img/Logo.png" alt="">
        </figure>
        <ul>
          <li><a class="hvr-underline-from-center" class="active" href="#">INICIO</a></li>
          <li><a class="hvr-underline-from-center" href="#two_box">SERVICIOS</a></li>
          <li><a class="hvr-underline-from-center" href="#galeriaPeces">PECES</a></li>
          <li><a class="hvr-underline-from-center" href="#alimentoPulga">ALIMENTOS VIVOS</a></li>
          <li><a class="toggle" href="#">CONTACTO</a></li>
        </ul>
      </nav>
      <div class="menu-toggle" id="btn-menu"><span class="icono icon-close"></span></div>
    </header>

1 respuesta 1

0

Puedes agregar un listener en el script para cambiar la clase cada que se de click en algun enlace

$('.menu-toggle, a').click(function() {
    $('nav').toggleClass('active')
  })

$('nav ul li a').click(() => {
     $('nav').removeClass('active')
});
2
  • Ok. Voy a probar gracias por la respuesta
    – Raul
    Commented el 18 dic. 2019 a las 16:27
  • No me funciono el código en pantallas pequeñas sí que se oculta pero ya al pasar a una pantalla más grande de 900 pixeles el menú desaparece y no quiero que pase eso en pantallas grandes, alguna otra forma de hacerlo para apagar eventos con los cambios de pantalla
    – Raul
    Commented el 21 dic. 2019 a las 14:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.