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>
id
. Não pode ter dois elementos com o mesmoid
. Umid
deve ser único na página.$("#toggle").click
vc não está pegando click em nenhum link.. o elemento#toggle
é uma div e não um link