'Codepen hexagon menu troubleshooting help: is my html file not properly linking to my javascript file?

I am a self taught coder and would be really grateful if someone could give me some advice on how to get the following hexagon animated menu I downloaded from codepen to work (link: http://codepen.io/web-tiki/pen/WvNQpG). Now I have created 3 files: hexmenu.html, hexmenu.css, and hexmenu.js all in the same folder of course. But when I paste the code from code pen in each file the menu doesn't seem to work. The head of my file which links to the js and css is as follows:

<!DOCTYPE html>
<head>
<html lang="en">
<meta charset="UTF-8" />
<title>PASSION DEVELOPMENT PROJECT</title>
<link href="hexmenu.css" rel="stylesheet" type="text/css" />
<script src="hexmenu.js" ></script>
</head>

Now all the html code from codepen is in the body tag; the css in hexmenu.css and the javascript in hexmenu.js file. Each one was pasted directly into different files respectively from codepen with no modification (there is nothing else in these files!), hence I'm a little baffled as to why this isn't working. Any advice?! The css document seems like it is working but I think something is wrong on the javascript end. Could anyone let me know what I'm missing? I even created a jsfiddle to check if the code itself was working and everything ran smoothly. Yet when I put the files on my desktop and run it on google chrome and firefox the menu doesn't open up... An easy fix would be a godsend at this point! I figure as a novice I must be missing something obvious here...

javascripthtml


Solution 1:[1]

You need window.onload in javascript. I Check following code in my local by adding window.onload and now it's working charm like in codepen.
Here i add all code in same HTML page you can separate javascript.

Use following code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
window.onload = function() {
var hexNav = document.getElementById('hexNav');

document.getElementById('menuBtn').onclick = function() {

    var className = ' ' + hexNav.className + ' ';
    if ( ~className.indexOf(' active ') ) {
        hexNav.className = className.replace(' active ', ' ');
    } else {
        hexNav.className += ' active';
    }              
}
};
</script>
</head>
<body>
<nav id="hexNav">
  <div id="menuBtn">
    <svg viewbox="0 0 100 100">
      <polygon points="50 2 7 26 7 74 50 98 93 74 93 26" fill="none" stroke-width="4" stroke="#585247" stroke-dasharray="0,0,300"/>
    </svg>
    <span></span>
  </div>
  <ul id="hex">
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm8.staticflickr.com/7435/13629508935_62a5ddf8ec_c.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
  </ul>
</nav>
</body>
</html>

Hope it helps. Fiddle link

Solution 2:[2]

you have to add js library in your head tag,

<script src="http://code.jquery.com/jquery-2.1.3.min.js" ></script>

actually your code is wrong,

<!DOCTYPE html>
<head>
<html lang="en">

replace with,

   <!DOCTYPE html>  
    <html lang="en">
   <head>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions