Skip to main content
adicionou 208 caracteres ao conteúdo
Fonte Link

OBS: EU COLOQUEI O @media(max-width 2000px;) propositalmente, isso depois eu ajeito, era apenas para debugar! PESSOAL AGORA EU CONSEGUI FAZER COM O QUE O MENU SUMISSE AO CLICAR NO LINK, SÓ QUE APÓS FAZER ISSO, QUANDO CLICAR NO TOGGLE DE NOVO, ELE NÃO FUNFA, SÓ SE DER 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>

OBS: EU COLOQUEI O @media(max-width 2000px;) propositalmente, isso depois eu ajeito, era apenas para debugar!

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");

        });
        
      </script>

OBS: EU COLOQUEI O @media(max-width 2000px;) propositalmente, isso depois eu ajeito, era apenas para debugar! PESSOAL AGORA EU CONSEGUI FAZER COM O QUE O MENU SUMISSE AO CLICAR NO LINK, SÓ QUE APÓS FAZER ISSO, QUANDO CLICAR NO TOGGLE DE NOVO, ELE NÃO FUNFA, SÓ SE DER 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>
formatação do código
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Então, estou tentando fazer um menu mobile/pc, que ao clicar no ínconeícone ele ocupe toda a tela, e ao rolar a pagina e ele vá junto.. E para isso, utilizei algumas funções de fixed no css, até aí tá de boa. Só que quando eu utilizo a opção fixed, o que era para aparecer o X de fechar, não aparece. Enfim... isso não importa muito agora, o que eu quero saber é que se alguém pode me ajudar olhando esse código, para que quando o usuário clique em algum dos links, feche o menu e vá para a a parte desejada da âncora..
AQUI TÁ O CSS PARA QUEM QUISER SIMULAR O COMPORTAMENTO. OBS: EU COLOQUEI O @media(max-width 2000px;) propositalmente, isso depois eu ajeito, era apenas para debugar!

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;
  }

} AQUI TÁ O CSS PARA QUEM QUISER SIMULAR O COMPORTAMENTO.

@media(min-width: 2000px) { #resize { visibility: hidden !important; } }OBS: EU COLOQUEI O @media(max-width 2000px;) propositalmente, isso depois eu ajeito, era apenas para debugar!

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");

        });
        
      </script>

Então, estou tentando fazer um menu mobile/pc, que ao clicar no íncone ele ocupe toda a tela, e ao rolar a pagina e ele vá junto.. E para isso, utilizei algumas funções de fixed no css, até aí tá de boa. Só que quando eu utilizo a opção fixed, o que era para aparecer o X de fechar, não aparece. Enfim... isso não importa muito agora, o que eu quero saber é que se alguém pode me ajudar olhando esse código, para que quando o usuário clique em algum dos links, feche o menu e vá para a a parte desejada da âncora..
AQUI TÁ O CSS PARA QUEM QUISER SIMULAR O COMPORTAMENTO. OBS: EU COLOQUEI O @media(max-width 2000px;) propositalmente, isso depois eu ajeito, era apenas para debugar!

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");

        });
        
      </script>

Então, estou tentando fazer um menu mobile/pc, que ao clicar no ícone ele ocupe toda a tela, e ao rolar a pagina e ele vá junto.. E para isso, utilizei algumas funções de fixed no css, até aí tá de boa. Só que quando eu utilizo a opção fixed, o que era para aparecer o X de fechar, não aparece. Enfim... isso não importa muito agora, o que eu quero saber é que se alguém pode me ajudar olhando esse código, para que quando o usuário clique em algum dos links, feche o menu e vá para a a parte desejada da âncora..

AQUI TÁ O CSS PARA QUEM QUISER SIMULAR O COMPORTAMENTO.

OBS: EU COLOQUEI O @media(max-width 2000px;) propositalmente, isso depois eu ajeito, era apenas para debugar!

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");

        });
        
      </script>
adicionou 2780 caracteres ao conteúdo
Fonte Link

Então, estou tentando fazer um menu mobile/pc, que ao clicar no íncone ele ocupe toda a tela, e ao rolar a pagina e ele vá junto.. E para isso, utilizei algumas funções de fixed no css, até aí tá de boa. Só que quando eu utilizo a opção fixed, o que era para aparecer o X de fechar, não aparece. Enfim... isso não importa muito agora, o que eu quero saber é que se alguém pode me ajudar olhando esse código, para que quando o usuário clique em algum dos links, feche o menu e vá para a a parte desejada da âncora..  
AQUI TÁ O CSS PARA QUEM QUISER SIMULAR O COMPORTAMENTO. OBS: EU COLOQUEI O @media(max-width 2000px;) propositalmente, isso depois eu ajeito, era apenas para debugar!

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");

        });
        
      </script>

Então, estou tentando fazer um menu mobile/pc, que ao clicar no íncone ele ocupe toda a tela, e ao rolar a pagina e ele vá junto.. E para isso, utilizei algumas funções de fixed no css, até aí tá de boa. Só que quando eu utilizo a opção fixed, o que era para aparecer o X de fechar, não aparece. Enfim... isso não importa muito agora, o que eu quero saber é que se alguém pode me ajudar olhando esse código, para que quando o usuário clique em algum dos links, feche o menu e vá para a a parte desejada da âncora..  

            <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");

        });
        
      </script>

Então, estou tentando fazer um menu mobile/pc, que ao clicar no íncone ele ocupe toda a tela, e ao rolar a pagina e ele vá junto.. E para isso, utilizei algumas funções de fixed no css, até aí tá de boa. Só que quando eu utilizo a opção fixed, o que era para aparecer o X de fechar, não aparece. Enfim... isso não importa muito agora, o que eu quero saber é que se alguém pode me ajudar olhando esse código, para que quando o usuário clique em algum dos links, feche o menu e vá para a a parte desejada da âncora..
AQUI TÁ O CSS PARA QUEM QUISER SIMULAR O COMPORTAMENTO. OBS: EU COLOQUEI O @media(max-width 2000px;) propositalmente, isso depois eu ajeito, era apenas para debugar!

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");

        });
        
      </script>
adicionou 513 caracteres ao conteúdo
Fonte Link
Carregando
Formatação de código
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128
Carregando
Fonte Link
Carregando