为什么我不能让汉堡菜单正常工作？

Question

I need some help here. I'm trying to make a hamburger menu for my website but for some reason which I can't figure out, it doesn't work. Here's the HTML, CSS and JavaScript code which I've written in codepen.io: https://codepen.io/TheUnrealisticProgrammer/pen/QvjvVW

Here's the JavaScript code:

$(document).ready(function(){
   $('Menu').click(function(){
     $(this).toggleClass('Trigger');
   });
   });  

From the code, the first span bar should animate by rotating 135 degrees after I click on it but it's not.

Answer 1

Use Jquery and JQuery UI before using. And $('Menu') Menu is not a tag but it is ID of div as per your Code Pen. It has to be $('#Menu') .

Answer 2

Please do these steps.

1. Go to your code pen
2. Click on the setting icon available in the JS section.
3. Add jquery reference ( https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js ) by clicking on the add another resource button placed at the right bottom of the dialog box.
4. In your javascript, you are using $('Menu'). which is actually searching for the tag called Menu. Change it to $('#Menu'). As you want to target to the ID.
5. It will work perfectly fine.

Answer 3

1. your css style is broken,
2. you don't have jQuery (add through setting)
3. $('Menu') this is jQuery as other said, you are selecting id so should be $('#Menu')

check this link for working example, fixed jQuery, js and CSS:

https://codepen.io/hdl881127/pen/wdKZVj

fixed css:

#Menu{
  position:relative;
  margin-top:20px;
  margin-left:20px;
  display:block;
  height:50px;
  cursor: pointer;
  width:50px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#Menu span{
  position:absolute;
  background:orange;
  display:block;
  height: 6px;
  width: 100%;
  border-radius:50px;  
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#Menu span:nth-child(1){
  top:0px;
}
#Menu span:nth-child(2){
  top:18px;
}
#Menu span:nth-child(3){
  top:36px;
}

#Menu.Trigger span:nth-child(1){
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#Menu.Trigger span:nth-child(2){
  top: 18px;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}

#Menu.Trigger span:nth-child(3){
  top: 18px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}