0

Muy buenas a todos, tengo el siguiente menu hamburguesa

var hamburger = document.querySelector(".hamburg");
    hamburger.onclick = function () {
        this.classList.toggle("checked");
    }
input#hamburg {
    display: none
}

.hamburg {
    display: block;
    width: 75px;
    height: 50px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4px;
    transition: border-radius .5s;
    cursor: pointer;
}

.line {
    position: absolute;
    left: 10px;
    height: 4px;
    width: 55px;
    background: #054A99;
    border-radius: 2px;
    display: block;
    transition: 0.5s;
    transform-origin: center;
}

.line:nth-child(2) {
    background: #FEAA14;
}

.line:nth-child(1) {
    top: 12px;
}

.line:nth-child(2) {
    top: 24px;
}

.line:nth-child(3) {
    top: 36px;
}

.hamburg.checked .line:nth-child(1) {
    transform: translateY(12px) rotate(-45deg);
}

.hamburg.checked .line:nth-child(2) {
    opacity: 0;
}

.hamburg.checked .line:nth-child(3) {
    transform: translateY(-12px) rotate(45deg);
}

.resp-menu nav.topmenu {
    height: auto;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s;
}

#hamburg:checked + .hamburg + nav.topmenu {
    max-height: 600px;
}
<div class="resp-menu">
   <input type="checkbox" id="hamburg">
   <label for="hamburg" class="hamburg">
   <span class="line"></span>
   <span class="line"></span>
   <span class="line"></span>
   </label>
   <nav class="topmenu">
      <div class="menu-menue-container">
         <ul id="menu-menue-1" class="menu">
            <li class="anchor menu-item menu-item-type-custom menu-item-object-custom menu-item-184"><a href="#start">Start</a></li>
            <li class="anchor menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="#kevMACCs">KEV/MACCs</a></li>
            <li class="anchor menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="#angebot">Unser Angebot</a></li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#ihreVorteile">Ihre Vorteile</a></li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#warumtxs">Warum TXS</a></li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="#contact">Kontakt</a></li>
         </ul>
      </div>
   </nav>
</div>

Y necesito implementarle un evento oneclick que haga que cuando pulso en cualquiera de los enlaces, el menu se cierre de forma automatica. Lo que intente fue esto, pero no funciona ya que mi conociemiento en javascript es y jquery es muy limitado.

$('.resp-manu ul > li a').on('click', function (event) {
    $('.hamburg').toggle();
});

No tira ningun error, pero básicamente no funciona. al hacer el control de codigo con el navegador, basicamente este se lo salta y creo que el fallo esta en que no estoy apuntando bien con el código, pero no veo el fallo.

Si alguien fuera tan amable de orientarme hacia donde esta el fallo seria de gran ayuda. Muchas gracias

5
  • 3
    Dario, se me hace raro que uses javascript puro para poner this.classList.toggle("checked"); y que luego cuando tienes que poner el mismo comportamiento cuando pulsas en los enlaces, que pongas jquery y además no imites el codigo de arriba si no que pones $('.hamburg').toggle(); Intenta imitar el comportamiento, y si no, ya que quieres el mismo comportamiento al pulsar en el enlace que cuando haces click en el menú, imita un click en el menú para que haga su logica sin repetirla.
    – lois6b
    el 28 nov. 2018 a las 8:26
  • Todo lo que haces ahora lo puedes hacer utilizando solo CSS. No necesitas javascript. La pregunta es ¿por qué necesitas cerrar el menu al hacer click en un enlace? Cuando haces click en un enlace te vas a otra página o cambias de posición. ¿Que sentido tiene cerrar el menu que ya pierdes de vista?
    – enxaneta
    el 28 nov. 2018 a las 11:10
  • 2
    @enxaneta si miras el href, no son enlaces a otras paginas si no a un ancla en la web.
    – lois6b
    el 28 nov. 2018 a las 11:16
  • Ya lo he visto. Pero igualmente cambias de posición. Por qué lo quieres cerrar? El usuario puede seguir necesitándolo
    – enxaneta
    el 28 nov. 2018 a las 11:18
  • El codigo que aqui he copiado fue lo ultimo que intente hacer, la verda es que me cuesta mucho entender pillar javascript, pero en ello estoy. Lo quiero cerra por que llegado a dispositivos como iphone 5 o 6, el menu coge toda la pantalla, y a mi paracer el cliente no puede ver donde esta, eso es lo que yo creo, pero ahora me quedo con la duda
    – Dario B.
    el 28 nov. 2018 a las 12:35

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.