Responsive menu with HTML and CSS only (target function)

Asked

Viewed 883 times

1

I don’t know the script art, and I’m creating a page with a responsive menu. I’ve done a lot of research and I’m testing a way, so far it’s not working.

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, also created the following commands 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;
}

}

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

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

I had the idea to create these codes after reading one of the answers to this question: Click on an image to show a div

html css

  • Mark with Target you will not be able to show and then "demostrar", once you click on a class="toggle-nav" You can’t take the :target and the menu will be visible forever... that’s exactly what you want, or you want to show with one click and hide another?

  • I don’t need to hide, just display with a click

  • 1

    Young just to give you the feedback your jsfiddle.net/sof8renr/5 works fine, if you remove the Script you made... it is "bugging" the menu for some reason. If you remove the Script everything works normal

2 answers

0


Mark, you can perform this action using Jquery. First you arrow the element div id="menu-header-resp" with display:none in the CSS then you will have to select the div who wishes to hide and the link who wants to perform the action, then just create the event of click link and display the item with the call show(). I will leave an example below to make it easier to understand and also there are 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>

  • I altered <a class="toggle-nav" href="#menu-header-resp">&#9776;</a> for <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> shortly after the div id="menu-header-resp". Inside the tag head created the script: $('#teste-link').click(function(){ $('#menu-header-resp').show(); }). But it didn’t work...

  • 1

    Place scripts at the bottom of the page before closing the tag body

  • Jorge, it worked. Thanks for the help! My initial intention was to create a page without scripts, but this one broke a branch! You could close the open div with a second click?

  • I edited the answer, test the code there, if you have any questions, you can ask.

  • With edited code, it is possible to show and hide the element

0

Avoid POG, use the method toggle (alternate between show/hide every 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>
<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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.