2

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! 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>
5
  • Bruno, leia a página Tour. Sua pergunta está muito pouco clara.
    – Sam
    Commented 20/05/2018 às 6:08
  • Seu código tem erro: tem duas <ul> com o mesmo id. Não pode ter dois elementos com o mesmo id. Um iddeve ser único na página.
    – Sam
    Commented 20/05/2018 às 6:28
  • Outra coisa: com $("#toggle").click vc não está pegando click em nenhum link.. o elemento #toggle é uma div e não um link
    – Sam
    Commented 20/05/2018 às 6:32
  • Aonde está o resto do código css? Você citou que colocou o fixed no css, mas não postou ele. Complemente sua pergunta. Commented 20/05/2018 às 8:17
  • Bruno se possível coloca tb o CSS do menu para podermos simular o comportamento dele
    – hugocsl
    Commented 20/05/2018 às 11:58

1 Resposta 1

0

Jovem vc precisa criar outra função para remover as classes depois que vc clicar no link

Veja abaixo como eu resolvi. Deixei o comente no script para vc ver. Repare que quando eu clico no A eu removo as classes de ativação dos outros elementos.

$("#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>

2
  • Valeu mano!!!! Funfou.. Commented 21/05/2018 às 12:33
  • @BrunoAlexandre boa gorato bo sorte ai, e salva esse código que pode te ajudar em outras situações!
    – hugocsl
    Commented 21/05/2018 às 12:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .