Não domino a arte dos scripts e estou criando uma página com menu responsivo. Já pesquisei bastante e estou testando uma forma, que até agora não está funcionando.
Criei o seguinte código html
:
<div class="header" id="menu-header">
<nav class="menu-header">
<ul>
<li><a href="#funcionalidades">Funcionalidades</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#precos">Preço</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contato</a></li>
</ul>
<a class="toggle-nav" href="#menu-header-resp">☰</a>
</nav>
</div>
<div id="menu-header-resp">
<nav>
<ul>
<li>teste</li>
<li>teste 2</li>
</ul>
</nav>
</div>
Com este html
, também criei os seguintes comandos css
:
.toggle-nav {
display:none;
}
div#menu-header-resp {
display: none;
}
div#menu-header-resp:target {
display: block;
}
@media screen and (max-width:1000px) {
nav.menu-header ul {
display: none;
}
.toggle-nav {
display: block;
color: rgba(255,255,255,.55);
font-weight: 700;
font-size: 21px;
}
.toggle-nav:hover {
color: rgba(255,255,255,.75);
transition: .2s;
}
}
Cheguei a esse estágio de código depois de estudar bastante sobre a função target
.
Em resumo, minha intenção é que a div id="menu-header-resp"
não seja exibida, a menos que seja chamada pelo clique em a class="toggle-nav"
.
Tive a ideia de criar esses códigos depois de ler uma das respostas desta pergunta: Clicar numa imagem aparecer uma div
a class="toggle-nav"
vc não consegue mais tirar o:target
e o menu vai ficar visível para sempre... é isso mesmo que vc quer, ou vc quer mostra com um clique e esconder cou outro?