1

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">&#9776;</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

3
  • Marcos com Target vc não vai conseguir mostrar e depois "desmostrar", umas vez que vc clica no 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?
    – hugocsl
    Commented 7/02/2018 às 18:32
  • Não preciso esconder, apenas exibir com um click
    – user99005
    Commented 7/02/2018 às 18:39
  • 1
    Jovem só para te dar o feedback o seu jsfiddle.net/sof8renr/5 funciona direitinho, isso se vc remover o Script que vc fez... ele está "buggando" o menu por algum motivo. Se vc remover o Script tudo funciona normal
    – hugocsl
    Commented 8/02/2018 às 17:01

2 Respostas 2

0

Marcos, você pode realizar essa ação usando Jquery. Primeiramente você seta o elemento div id="menu-header-resp" com display:none no CSS em seguida você vai ter que selecionar a div que deseja esconder e o link que deseja realizar a ação, ai basta apenas criar o evento de click no link e exibir o item com a chamada show(). Irei deixar um exemplo abaixo para ficar mais fácil o entendimento e também há comentários no código para ficar mais fácil o entendimento.

$('#link').click(function(){//selecionando o link e atribuindo o evento de click ao mesmo
   var bloco = $('#bloco');       
   
   if(!bloco.hasClass('clicado')){
      bloco.show(); // chama o bloco com a função show() que exibe o documento
      bloco.addClass('clicado'); //adiciona uma classe para motivo de verificação
      
      }
      else if(bloco.hasClass('clicado')){
           bloco.hide();
           bloco.removeClass('clicado')
      }
})
#bloco{
  display:none;
}
<div id="bloco"> Apareci pois fui clicado pelo link!</div>
<a id="link">Clique aqui! </a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

5
  • Alterei <a class="toggle-nav" href="#menu-header-resp">&#9776;</a> para <a id="teste-link" class="toggle-nav" href="#menu-header-resp">&#9776;</a>. Colei <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> logo depois da div id="menu-header-resp". Dentro da tag head criei o script: $('#teste-link').click(function(){ $('#menu-header-resp').show(); }). Mas não funcionou...
    – user99005
    Commented 7/02/2018 às 18:12
  • 1
    Coloque os scripts no final da página, antes do fechamento da tag body Commented 7/02/2018 às 18:15
  • Jorge, funcionou. Obrigado pela ajuda! Minha intenção inicial era criar uma página sem scripts, mas esse quebrou um galho! Teria como fechar a div aberta com um segundo clique?
    – user99005
    Commented 7/02/2018 às 18:18
  • Editei a resposta, testa o código ai, se tiver dúvidas, pode perguntar. Commented 7/02/2018 às 18:29
  • Com o código editado, é possível mostrar e esconde o elemento Commented 7/02/2018 às 19:51
0

Evite POG, use o método toggle (alterna entre mostra/esconde a cada clique):

$("a.toggle-nav").click(function(){
   $("#menu-header-resp").toggle();
});

Exemplo:

$("a.toggle-nav").click(function(){
   $("#menu-header-resp").toggle();
});
.toggle-nav {
    display:none;
    color: #000;
}

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;
    color: #000;
}

.toggle-nav:hover {
    color: rgba(255,255,255,.75);
    transition: .2s;
}

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<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">&#9776;</a>
       </nav>
   </div>

   <div id="menu-header-resp">
       <nav>
           <ul>
               <li>teste</li>
               <li>teste 2</li>
           </ul>
       </nav>
   </div>

0

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