Adding SCSS and JS file to html, not working correctly

Question

I have been trying to add this "burger" style menu to a website and and getting stuck because the burger animation is not playing on the click.

Menu is here: https://codepen.io/designcouch/pen/hyFAD

I put the 'compiled' SCSS code into the css file and linked it like I'd like any other css file.

Could someone please explain what I'm doing wrong? Thank you in advance.

$('#menu-toggle').click(function(){
  $(this).toggleClass('open');
})

* {
  transition: 0.25s ease-in-out;
  box-sizing: border-box;
}

body {
  background: #d9e4ea;
}

span {
  display: block;
  background: #566973;
  border-radius: 2px;
}

#menu-toggle {
  width: 100px;
  height: 100px;
  margin: 50px auto;
  position: relative;
  position: relative;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 5px;
}
#menu-toggle:hover {
  background: rgba(255, 255, 255, 0.8);
}
#menu-toggle #hamburger {
  position: absolute;
  height: 100%;
  width: 100%;
}
#menu-toggle #hamburger span {
  width: 60px;
  height: 4px;
  position: relative;
  top: 24px;
  left: 20px;
  margin: 10px 0;
}
#menu-toggle #hamburger span:nth-child(1) {
  transition-delay: 0.5s;
}
#menu-toggle #hamburger span:nth-child(2) {
  transition-delay: 0.625s;
}
#menu-toggle #hamburger span:nth-child(3) {
  transition-delay: 0.75s;
}
#menu-toggle #cross {
  position: absolute;
  height: 100%;
  width: 100%;
  transform: rotate(45deg);
}
#menu-toggle #cross span:nth-child(1) {
  height: 0%;
  width: 4px;
  position: absolute;
  top: 10%;
  left: 48px;
  transition-delay: 0s;
}
#menu-toggle #cross span:nth-child(2) {
  width: 0%;
  height: 4px;
  position: absolute;
  left: 10%;
  top: 48px;
  transition-delay: 0.25s;
}

#menu-toggle.open #hamburger span {
  width: 0%;
}
#menu-toggle.open #hamburger span:nth-child(1) {
  transition-delay: 0s;
}
#menu-toggle.open #hamburger span:nth-child(2) {
  transition-delay: 0.125s;
}
#menu-toggle.open #hamburger span:nth-child(3) {
  transition-delay: 0.25s;
}
#menu-toggle.open #cross span:nth-child(1) {
  height: 80%;
  transition-delay: 0.625s;
}
#menu-toggle.open #cross span:nth-child(2) {
  width: 80%;
  transition-delay: 0.375s;
}

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="menu-toggle">
  <div id="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div id="cross">
    <span></span>
    <span></span>
  </div>
</div>
<script src="button.js"></script>
</body>
</html>

They're all in the same folder. This code works perfectly on Codepen.io but when I try to use it in my own projects the button doesn't work. — Chris_
– Chris_, Commented Apr 23, 2020 at 23:36
If it's in the same folder (a sibling) then what you listed would work. A thing to try would be to use ../style.css to see if it's actually up one level. Sometimes relative sources can be a pain. Without actually seeing the structure, it's hard to tell. Just something to try in the meantime. :) — Joel Hager
– Joel Hager, Commented Apr 23, 2020 at 23:40
Does this answer your question? JavaScript runtime error: '$' is undefined — Cagri Tacyildiz
– Cagri Tacyildiz, Commented Apr 24, 2020 at 8:21

Ekas Preet Singh · Accepted Answer · 2020-04-24 00:48:26Z

-1

You are doing everything correct here. Probably, the $ object you are using requires a library to be invoked.

$('#menu-toggle').click(function(){
   $(this).toggleClass('open');
})

The syntax you are using is actually from a library named jQuery which is build over JavaScript and provides such utilities to help us write lesser and better code.

For this just search for jQuery CDN on internet. Open the first link and go to jQuery 3.x minified, a popup will appear and copy the script and place it just before closing your body tag.

<html>
<head></head>
<body>

<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js" />
</body>
</html>

Further, if you are not willing to use jQuery. This is how you would write in native JavaScript.

document.getElementById("menu-toggle").addEventListener("click", function(){
  if(this.classList[0] === 'open'){
     this.classList.remove('open');
  }
  else {
     this.classList.add('open');
  }
});

answered Apr 24, 2020 at 0:48

Ekas Preet Singh

611 gold badge1 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris_ Over a year ago

Thank you very much for your detailed explanation.

Collectives™ on Stack Overflow

Adding SCSS and JS file to html, not working correctly

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related