如何使JQuery切换不移动元素？

Question

I'm trying to make a responsive website menu which is openable with a burger (3 lines).

I've got the menu to open but it keeps moving the burger up and down in order to make way for it.

How do I make it so you click the burger and it stays in the SAME PLACE whilst opening the menu and playing its animation?

<div class="burger" id="burger" onclick="openBurger(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
</center>

JS

function openBurger(x) {
    x.classList.toggle("change");
}

$("#burger").click(function() { 
$("#nav").toggle();
});

Burger

As you can see, the burger bumps down to make space for the menu.

Thanks.

Answer 1

 function myFunction(x) { x.classList.toggle("change"); } 

 .container { display: inline-block; cursor: pointer; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); } .change .bar2 {opacity: 0;} .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); } 

 <div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> 

Answer 2

Your hamburger menu should live independently from your nav list. With this example, you can include it before the list, and use jQuery to toggle the state of the navigation.

 $("#burger").click(function() { var state = $("#nav").attr("class"); $("#nav").attr("class", state == "show" ? "hide" : "show"); }); 

 #burger { font-size: 32px; text-decoration: none; } #nav { display: none; } #nav.show { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="burger" href="#">☰</a> <ul id="nav"> <li><a class="bar1" href="#">Home</a></li> <li><a class="bar2" href="#">Work</a></li> <li><a class="bar3" href="#">Contact</a></li> </ul>