Hamburger javascript animation doesn't work: "unexpected token"

Question

So this is my first post here and sorry if I'm not very precise but I'm quite new in the coding world.

Can somebody explain me why the Javascript code that I added at the end of my html doesn't work?

Basically I want my hamburger to animate on toggle, but it seems not working properly.

Does it mean that I need to add a jQuery library? how should I do that exactly? I tried to link my html file to an online jQuery library but didn't work.

Thanks in advance for your help. Ciao!

$(document).ready(function(){
 $('#nav-icon3').click(function(){
  $(this).toggleClass('open');
 });
});

#nav-icon3 {
  width: 60px;
  height: 45px;
  position: relative;
  margin: 50px auto;
  -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;
  cursor: pointer;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #d3531a;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -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;
}

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 18px;
}

#nav-icon3 span:nth-child(4) {
  top: 36px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

<div onclick="function()" id="nav-icon3">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>

Yes, you need jQuery to run your example. Can you show your complete HTML code? — Amiga500, Jun 15 '17 at 10:05
this is innecesary **onclick="function()")** you trigger the event in **$('#nav-icon3').click(function(){** — Roy Bogado, Jun 15 '17 at 10:05

score -1 · Answer 1 · answered Jun 15 '17 at 10:04

-1

Yes, if you are using jQuery, you need to link it to you html document. Just add:

<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>

after your main.js file and you will be able to use jQuery. :)

answered Jun 15 '17 at 10:04

Maksims Kitajevs

225
1
7

Sorry, id you don't have jquery in your document, you can link it through inthernet, just be sure to test your page when you have internet connection. :) – Maksims Kitajevs Jun 15 '17 at 10:05
– Maksims Kitajevs Jun 15 '17 at 10:05

score -1 · Answer 2 · answered Jun 15 '17 at 10:07

-1

And if you use jQuery, you don't need onclick="" argument in your html code. It is ok to use $(target).click(function(){...});

answered Jun 15 '17 at 10:07

Maksims Kitajevs

225
1
7

Hamburger javascript animation doesn't work: "unexpected token"

2 Answers2