I took the code from the codepen, but I do not know where to insert the js code for the burger to work.

$(".burger").click(function() { console.log("click"); $("#menu").toggleClass('hidden'); $("#header .burger").toggleClass('hidden'); }); 
 body { margin-top: 60px; } p { font-size: large; } #header { color: #009688; background-color: white; height: 40px; width: 100%; top: 0; padding-top: 10px; padding-left: 5px; position: fixed; } #menu { background-color: white; height: 100%; position: fixed; top: 0; left: 0; padding-top: 10px; } #menu .panel-body, #header .panel-body { padding-top: 0; } #menu .panel-body { margin-left: 10px; } #card .panel-body { padding: 0; padding-bottom: 10px; } .title, .desc, .author { margin-left: 10px; margin-right: 10px; } .lien { padding-top: 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid"> <div class="row panel panel-default" id="header"> <div class="panel-body col-md-1"> <a href="#" class="burger"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#009688" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /> </svg> </a> </div> </div> <div class="row panel panel-default hidden" id="menu"> <div class="panel-body"> <div class="row"> <div class="col-md-9"> <p>Burger Menu</p> </div> <div class="col-md-1"> <a href="#" class="burger"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#009688" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /> </svg> </a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#profile.html">My profile</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#msg.html">Messages</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#set.html">Settings</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#art.html">My articles</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#group.html">Groups</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#alb.html">Albums</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#svp.html">Saved Posts</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#blog.html">Blog</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#frum.html">Forum</a> </div> </div> </div> </div> </div>

Discard the html code with the associated js for everything to work.

  • one
    What does it all work? - Roman C
  • @RomanC for a full-fledged burger - sekeke6
  • to the jQuery website connected at all? - E1mir
  • one
    Didn't understand what a full burger means? - Roman C
  • one
    And what does not work? - Roman C

1 answer 1

You lost the hidden class and jquery did not connect. This is how it works.

 $(".burger").click(function(){ /*console.log("click");*/ $("#menu").toggleClass('hidden'); $("#header .burger").toggleClass('hidden'); }); 
 body{ margin-top: 60px; } p{ font-size: large; } #header{ color: #009688; background-color: white; height: 40px; width: 100%; top: 0; padding-top: 10px; padding-left: 5px; position: fixed; } #menu{ background-color: white; height: 100%; position: fixed; top: 0; left: 0; padding-top: 10px; } #menu .panel-body, #header .panel-body{ padding-top: 0; } #menu .panel-body{ margin-left: 10px; } #card .panel-body{ padding: 0; padding-bottom: 10px; } .title, .desc, .author{ margin-left: 10px; margin-right: 10px; } .lien{ padding-top: 10px; } .hidden { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="new.css"> <link rel="stylesheet" href="now.js"> <link rel="stylesheet" href="set.html"> </head> <body> <div class="container-fluid"> <div class="row panel panel-default" id="header"> <div class="panel-body col-md-1"> <a href="#" class="burger"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#009688" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /> </svg> </a> </div> </div> <div class="row panel panel-default hidden" id="menu"> <div class="panel-body"> <div class="row"> <div class="col-md-9"> <p>Burger Menu</p> </div> <div class="col-md-1"> <a href="#" class="burger"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#009688" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /> </svg> </a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#profile.html">My profile</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#msg.html">Messages</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#set.html">Settings</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#art.html">My articles</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#group.html">Groups</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#alb.html">Albums</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#svp.html">Saved Posts</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#blog.html">Blog</a> </div> </div> <div class="row lien"> <div class="col-md-12"> <a href="#frum.html">Forum</a> </div> </div> </div> </div> </div> </div> </div> </body> </html>

  • for some reason it does not work for me, but everything is OK on the site - sekeke6
  • Likely you on a site jquery did not connect or incorrectly registered. <script src = " ajax.googleapis.com/ajax/libs/jquery/2.1.1/… >> write in the header block. - coder675
  • Or write what you have on the result on the site it turns out you will be prompted how to register. - coder675