Menu responsive only with HTML and CSS (target function)

Navigation
1

I do not master the art of scripts and am creating a responsive menu page. I've done a lot of research and I'm testing a form that has not worked so far.

I created the following code 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>

With this html , I also created the following css commands: 

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

}

I came to this stage of code after studying a lot about the target function.

In summary, my intention is that div id="menu-header-resp" is not displayed unless it is called by a class="toggle-nav" .

I had the idea of creating these codes after reading one of the answers to this question: Clicking on an image will pop up a div

    
asked by anonymous 07.02.2018 / 18:47

2 answers

1

Frames, you can do this using Jquery. First of all you have the element div id="menu-header-resp" with display:none in CSS then you will have to select the div you want to hide and the link you want to perform the action, then just create the click event in the link and display the item with the show() call. I'll leave an example below to make it easier to understand and there are also comments in the code to make it easier to understand. 

$('#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>
    
07.02.2018 / 19:02
0

Avoid POG, use the toggle method (toggle between show / hide with each click): 

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

Example: 

$("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><scriptsrc="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>
    
07.02.2018 / 19:40
Write custom variable in SNEP CDR Bank How to hide the arrow coming back in xamarin?