How to close JS menu by clicking on the link?

Asked

Viewed 76 times

2

So I’m trying to make a mobile/pc menu, which by clicking on the icon it takes up the entire screen, and by scrolling the page and it goes along.. And for this, I used some functions of Fixed in css, so far is good. Only when I use the Fixed option, what was supposed to appear the close X, does not appear. Anyway... it doesn’t matter much now, what I want to know is that if someone can help me looking at this code, so that when the user clicks on any of the links, close the menu and go to the desired part of the anchor..

HERE’S THE CSS FOR ANYONE WHO WANTS TO SIMULATE BEHAVIOR.

NOTE: I PUT @media(max-width 2000px;) purposely, that after I set it up, it was just to debug! NOW I MANAGED TO MAKE THE MENU DISAPPEAR BY CLICKING ON THE LINK, ONLY AFTER DOING THIS, WHEN YOU CLICK ON TOGGLE AGAIN, IT DOES NOT FUNF, ONLY IF F5

nav {
      width: 100%;
      background: #000;
      height: 70px;
      position: fixed;
      z-index: 1;
}

nav #brand {
      float: left;
      display: block;
      margin-left: 84px;
      font-size: 30px;
      line-height: 70px;
      font-weight: bold;
}

nav #brand a {
      color: #fff;
      transition: all 0.3s ease-out;
      font-family: "Poppins";
      font-weight: 300;
}

nav #menu {
      float: left;
      left: 50%;
      position: fixed;
}

nav #menu li {
      display: inline-block;
      padding: 0px 30px;
      cursor: pointer;
      line-height: 70px;
      position: fixed;
      transition: all 0.3s ease-out;
}

nav #menu li a {
      color: #fff;
      font-family: "Poppins";
      font-weight: 200;
}

#toggle {
      position: fixed;
      right: 20px;
      top: 14px;
      z-index: 999;
      width: 40px;
      height: 40px;
      cursor: pointer;
      float: right;
      transition: all 0.3s ease-out;
      visibility: hidden;
      opacity: 0;
}

#toggle .span {
      height: 3px;
      background: #fff;
      transition: all 0.3s ease-out;
      backface-visibility: hidden;
      margin: 5px auto;
}

#toggle.on #one {
      transform: rotate(45deg) translateX(2px) translateY(4px);
}

#toggle.on #two {
      opacity: 0;
}

#toggle.on #three {
      transform: rotate(-45deg) translateX(8px) translateY(-10px);
}

#resize {
      z-index: 1;
      top: 0px;
      position: fixed;
      background: #000;
      width: 100%;
      height: 100%;
      visibility: hidden;
      opacity: 0;
      transition: all 1s ease-out;
      display: table;
}

#resize #menu {
      height: 90px;
      display: table-cell;
      vertical-align: center;
}

#resize #menu li {
      display: block;
      text-align: center;
      padding: 20px 0;
      font-size: 50px;
      min-height: 50px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease-out;
}

#resize li:nth-child(1) {
      margin-top:140px;
}

#resize #menu li a {
      color: #fff;
}

#resize.active {
      visibility: visible;
      opacity: 0.99;
}


@media(max-width: 2000px) {
      #toggle {
            visibility: visible;
            opacity: 1;
            margin-top: 6px;
      }

      nav #brand {
            margin-left: 18px;
      }

      #menu a {
            font-family: "Poppins";
            font-weight: 200;
            font-size: 20px;
      }

      nav #menu {
            display: none;
      }
}

@media(min-width: 2000px) {
      #resize {
            visibility: hidden !important;
      }
}


<nav style="background: none;">
            <ul id="menu">
                  <li><a>Voltar</a></li>
                  <li ><a href="#blog">Blog</a></li>
                  <li><a href="#sobre">Sobre</a></li>
                  <li><a href="#oportunidades">Oportunidades</a></li>
                  <li><a href="#agenda">Agenda</a></li>
                  <li><a href="#time">Time de Campeões</a></li>
                  <li><a href="#trabalhe">Trrabalhe Comigo</a></li>
                  <li><a href="#ministerio">Ministério</a></li>

            </ul>

            <div style="float: left !important;" id="toggle">
                  <div style="border: 1px #000 solid;" class="span" id="one"></div>
                  <div style="border: 1px #000 solid" class="span" id="two"></div>
                  <div style="border: 1px #000 solid" class="span" id="three"></div>
            </div>
      </nav>

      <div style="" id="resize">

            <ul id="menu">
                  <li><a href="">Voltar</a></li>
                  <li style="height: 5px;"><a href="#blog">Blog</a></li>
                  <li style="height: 5px;"><a href="#sobre">Sobre</a></li>
                  <li style="height: 5px;"><a href="#oportunidade">Agenda</a></li>
                  <li style="height: 5px;"><a href="#agenda">Ministério</a></li>
                  <li style="height: 5px;"><a href="#time">Oportunidade</a></li>
                  <li style="height: 5px;"><a href="#trabalhe">Trabalhe Comigo</a></li>
                  <li style="height: 5px;"><a href="#ministerio">Time de Campeões</a></li>
            </ul>
      </div>



      <script>

    $("#toggle").click(function() {

        $(this).toggleClass('on');
        $("#resize").toggleClass("active");

        $('#menu a').click(function(){ $('#resize').toggleClass("d"); });
    });



  </script>
javascript html

  • Bruno, read the page Tour. Your question is very unclear.

  • Your code has error: has two <ul> with the same id. Can’t have two elements with the same id. A idshould be unique on the page.

  • Another thing: with $("#toggle").click you are not clicking on any link.. the element #toggle is a div and not a link

  • Where’s the rest of the css code? You mentioned that you put Fixed in css, but you didn’t post it. Add to your question.

  • Bruno if possible puts also the CSS menu so we can simulate his behavior

1 answer

0


Young you need to create another function to remove the classes after you click the link

See below how I solved it. I left the comment in the script for you to see. Note that when I click on A I remove the activation classes from the other elements.

$("#toggle").click(function() {
    $(this).toggleClass('on');
    $("#resize").toggleClass("active");

});
// função para remover as classes do menu depois que clica no link
$("a").click(function() {
    $("#resize").removeClass("active");
    $("#toggle").removeClass("on");
});
nav {
        width: 100%;
        background: #000;
        height: 70px;
        position: fixed;
        z-index: 1;
  }

  nav #brand {
        float: left;
        display: block;
        margin-left: 84px;
        font-size: 30px;
        line-height: 70px;
        font-weight: bold;
  }

  nav #brand a {
        color: #fff;
        transition: all 0.3s ease-out;
        font-family: "Poppins";
        font-weight: 300;
  }

  nav #menu {
        float: left;
        left: 50%;
        position: fixed;
  }

  nav #menu li {
        display: inline-block;
        padding: 0px 30px;
        cursor: pointer;
        line-height: 70px;
        position: fixed;
        transition: all 0.3s ease-out;
  }

  nav #menu li a {
        color: #fff;
        font-family: "Poppins";
        font-weight: 200;
  }

  #toggle {
        position: fixed;
        right: 20px;
        top: 14px;
        z-index: 999;
        width: 40px;
        height: 40px;
        cursor: pointer;
        float: right;
        transition: all 0.3s ease-out;
        visibility: hidden;
        opacity: 0;
  }

  #toggle .span {
        height: 3px;
        background: #fff;
        transition: all 0.3s ease-out;
        backface-visibility: hidden;
        margin: 5px auto;
  }

  #toggle.on #one {
        transform: rotate(45deg) translateX(2px) translateY(4px);
  }

  #toggle.on #two {
        opacity: 0;
  }

  #toggle.on #three {
        transform: rotate(-45deg) translateX(8px) translateY(-10px);
  }

  #resize {
        z-index: 1;
        top: 0px;
        position: fixed;
        background: #000;
        width: 100%;
        height: 100%;
        visibility: hidden;
        opacity: 0;
        transition: all 1s ease-out;
        display: table;
  }

  #resize #menu {
        height: 90px;
        display: table-cell;
        vertical-align: center;
  }

  #resize #menu li {
        display: block;
        text-align: center;
        padding: 20px 0;
        font-size: 50px;
        min-height: 50px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease-out;
  }

  #resize li:nth-child(1) {
        margin-top:140px;
  }

  #resize #menu li a {
        color: #fff;
  }

  #resize.active {
        visibility: visible;
        opacity: 0.99;
  }


  @media(max-width: 2000px) {
        #toggle {
              visibility: visible;
              opacity: 1;
              margin-top: 6px;
        }

        nav #brand {
              margin-left: 18px;
        }

        #menu a {
              font-family: "Poppins";
              font-weight: 200;
              font-size: 20px;
        }

        nav #menu {
              display: none;
        }
  }

  @media(min-width: 2000px) {
        #resize {
              visibility: hidden !important;
        }
  }
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<nav style="background: none;">
        <ul id="menu">
            <li><a>Voltar</a></li>
            <li ><a href="#blog">Blog</a></li>
            <li><a href="#sobre">Sobre</a></li>
            <li><a href="#oportunidades">Oportunidades</a></li>
            <li><a href="#agenda">Agenda</a></li>
            <li><a href="#time">Time de Campeões</a></li>
            <li><a href="#trabalhe">Trrabalhe Comigo</a></li>
            <li><a href="#ministerio">Ministério</a></li>

        </ul>

        <div style="float: left !important;" id="toggle">
            <div style="border: 1px #000 solid;" class="span" id="one"></div>
            <div style="border: 1px #000 solid" class="span" id="two"></div>
            <div style="border: 1px #000 solid" class="span" id="three"></div>
        </div>
</nav>

<div style="" id="resize">

        <ul id="menu">
            <li><a href="">Voltar</a></li>
            <li style="height: 5px;"><a href="#blog">Blog</a></li>
            <li style="height: 5px;"><a href="#sobre">Sobre</a></li>
            <li style="height: 5px;"><a href="#oportunidade">Agenda</a></li>
            <li style="height: 5px;"><a href="#agenda">Ministério</a></li>
            <li style="height: 5px;"><a href="#time">Oportunidade</a></li>
            <li style="height: 5px;"><a href="#trabalhe">Trabalhe Comigo</a></li>
            <li style="height: 5px;"><a href="#ministerio">Time de Campeões</a></li>
        </ul>
</div>

  • Thanks bro!!!! Funfou..

  • @Brunoalexandre good gorato bo sorte ai, and saves this code that can help you in other situations!

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.