javascripthtmlcsshamburger-menu

JS working in Codepen, but not on Browser


Here's what my code looks like on codepen (ignore broken image):

https://codepen.io/kornstalk/pen/ZEqXrgq

My issue is that whenever the code is run on browser, the animation on the icon breaks - the menu functions just fine (ignore the styling, I'm tweaking it later). This is my first time trying to use JS with HTMl & CSS, and it seems like the error's I've gotten are that Icon is undefined

Here is my full HTML Code:

    <!doctype html>
    <html class="no-js" lang="en">

    <head>
      <meta charset="utf-8">
      <title>Rlayout</title>
      <meta name="description" content="This site will serve as the hub for many sub responsive 
layouts">
      <meta name="viewport" content="width=device-width, initial-  scale=1">

      <meta property="og:title" content="">
      <meta property="og:type" content="">
      <meta property="og:url" content="">
      <meta property="og:image" content="">

      <link rel="manifest" href="site.webmanifest">
      <link rel="apple-touch-icon" href="icon.png">
      <!-- Place favicon.ico in the root directory -->

      <link rel="stylesheet" href="css/normalize.css">

      <link rel="stylesheet" href="css/main.css">
      <meta name="theme-color" content="#fafafa">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

      <!-- Fonts-->

      <!--Providence Sans-->
      <link rel="stylesheet" href="https://use.typekit.net/xzx3vba.css">
    
    </head>

    <body>
      <!-- Place your site's HTML here -->
      <header class="header">
        <img class="logo" src="img/giz2.jpg" alt="This is our company logo">
        <nav class="main-nav">
          <a href="">About</a>
          <span> | </span>
          <a href="">Contact</a>
          <span> | </span>
          <a href="">Work</a>
        </nav>
        <div class="mobile-nav-wrapper">
          <a href="javascript:void(0);" class="icon" data= "hamburger-menu" onclick="myFunction()">
          <span></span>
          <span></span>
          <span></span>
          </a>
          <nav id="myLinks" class="mobile-main-nav">
            <a href="">Work <span></span></a>
            <a href="">About</a>
            <a href="">Contact</a>
          </nav>
        </div>
      </header>



      <footer>
        <p>&copy; 2500</p>
        <div>
          <img src="./img/giz2.jpg" alt="">
          <img src="./img/giz2.jpg" alt="">
        </div>
      </footer>

      <script src="js/main.js"></script>
    </body>

    </html>

I've tried using the code below, which results in no errors, but won't animate:

var Icon = document.querySelector(".icon");
var Icon1 = document.querySelector(".icon span:nth-child(1)");
var Icon2 = document.querySelector(".icon span:nth-child(2)");
var Icon3 = document.querySelector(".icon span:nth-child(3)");

any help would be super appreciated !!!


Solution

  • As the comments already stated, please look into the browser log and see what errors it gives you.

    I would assume that you've forgotten to add the dependency to velocity.js.

    Try to add the following in your HTML and test again:

    <script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
    

    Edit: And maybe you've even forgotten to include jQuery. As you stated, that $ is not known, ensure that you include jQuery and velocity.

    Edit 2

    As you didn't quite believe me/us, I even did it myself and it worked flawlessly... I think no further questions are necessary :D Note that you must "enlarge" the code execution to see it in action.

    // JS scripts placed here
    
    function myFunction() {
      var x = document.getElementById("myLinks");
      if (x.style.display === "flex") {
        x.style.display = "none";
      } else {
        x.style.display = "flex";
      }
    }
    
    var Icon = $(".icon");
    var Icon1 = Icon.find("span:nth-child(1)");
    var Icon2 = Icon.find("span:nth-child(2)");
    var Icon3 = Icon.find("span:nth-child(3)");
    
    Icon.click(function() {
      $(this).toggleClass("active");
    
      if (Icon.hasClass("active")) {
        Icon1.velocity({
          top: "50%"
        }, {
          duration: 200,
          easing: "swing"
        });
        Icon3.velocity({
            top: "50%"
          }, {
            duration: 200,
            easing: "swing"
          })
          .velocity({
            rotateZ: "90deg"
          }, {
            duration: 800,
            delay: 200,
            easing: [500, 20]
          });
        Icon.velocity({
          rotateZ: "135deg"
        }, {
          duration: 800,
          delay: 200,
          easing: [500, 20]
        });
      } else {
        Icon.velocity("reverse");
        Icon3.velocity({
            rotateZ: "0deg"
          }, {
            duration: 800,
            easing: [500, 20]
          })
          .velocity({
            top: "100%"
          }, {
            duration: 200,
            easing: "swing"
          });
        Icon1.velocity("reverse", {
          delay: 800
        });
      }
    });
    /* Place CSS styles here */
    
    html {
      scroll-behavior: smooth;
    }
    
    body {
      color: purple;
      /* distribute font to entire site */
      font-family: ff-providence-sans-web-pro, sans-serif;
      font-style: normal;
      font-weight: 400;
      background-color: var(--white);
    }
    
    :root {
      --grey: #ddd;
      --white: #F5F5F5;
    }
    
    img {
      width: 100%;
      height: auto;
    }
    
    
    /* distribute font to all headings */
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: 'Karla', sans-serif;
      font-style: italic;
      font-weight: 700;
      text-transform: uppercase;
      text-shadow: 5px 4px 7px #00c200;
    }
    
    h1 {
      font-size: 74px;
    }
    
    .header {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
      justify-content: space-between;
    }
    
    .logo {
      max-width: 100px;
    }
    
    .main-nav {
      display: flex;
      justify-content: space-between;
      gap: 16px;
    }
    
    @media (max-width: 599px) {
      .main-nav {
        display: none;
      }
      .header {
        flex-direction: row;
      }
    }
    
    .icon {
      z-index: 1;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: 139px;
      margin-top: -281px;
      width: 44px;
      height: 33px;
      cursor: pointer;
    }
    
    .icon span {
      position: absolute;
      left: 0;
      width: 44px;
      height: 3px;
      background-color: black;
    }
    
    .icon span:nth-child(1) {
      top: 0;
    }
    
    .icon span:nth-child(2) {
      top: 50%;
    }
    
    .icon span:nth-child(3) {
      top: 100%;
    }
    
    .mobile-main-nav {
      display: none;
      flex-direction: column;
      background-color: var(--white);
      padding-bottom: 38px;
      align-items: center;
      align-content: center;
      margin-left: 20px;
      margin-right: 20px;
      position: absolute;
      top: 178px;
      left: 0;
      right: 0;
    }
    
    .mobile-main-nav a {
      padding: 8px;
      text-align: center;
    }
    
    .mobile-main-nav a::before {
      content: "";
      padding-top: 20px;
      display: block;
      padding-left: 12rem;
      border-top: 1px solid black;
    }
    
    .mobile-main-nav a::after {
      content: "";
      margin-bottom: -18px;
      display: block;
      padding-bottom: 20px;
      border-bottom: 2px solid black;
    }
    
    @media (min-width: 1000px) { /* CHANGED FOR DEMO ONLY */
      .mobile-nav-wrapper {
        display: none;
      }
    }
    
    @media screen and (min-width: 768px) {
      h1 {
        font-size: 64px;
      }
    }
    <!doctype html>
    <html class="no-js" lang="en">
    
    <head>
      <meta charset="utf-8">
      <title>Rlayout</title>
      <meta name="description" content="This site will serve as the hub for many sub responsive layouts">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    
      <meta property="og:title" content="">
      <meta property="og:type" content="">
      <meta property="og:url" content="">
      <meta property="og:image" content="">
    
      <link rel="apple-touch-icon" href="icon.png">
      <!-- Place favicon.ico in the root directory -->
    
      <link rel="stylesheet" href="css/normalize.css">
    
      <link rel="stylesheet" href="css/main.css">
      <meta name="theme-color" content="#fafafa">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
      <!-- Fonts-->
    
      <!--Providence Sans-->
      <link rel="stylesheet" href="https://use.typekit.net/xzx3vba.css">
    
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
    </head>
    
    <body>
      <!-- Hamburger Menu -->
      <header class="header">
        <img class="logo" src="img/giz2.jpg" alt="This is our company logo">
        <nav class="main-nav">
          <a href="">About</a>
          <span> | </span>
          <a href="">Contact</a>
          <span> | </span>
          <a href="">Work</a>
        </nav>
        <div class="mobile-nav-wrapper">
          <a href="javascript:void(0);" class="icon" data="hamburger-menu">
            <span></span>
            <span></span>
            <span></span>
          </a>
          <nav id="myLinks" class="mobile-main-nav">
            <a href="">Work <span></span></a>
            <a href="">About</a>
            <a href="">Contact</a>
          </nav>
        </div>
      </header>
    
      <script src="js/main.js"></script>
    </body>
    
    </html>