Codepen Hex Menu Troubleshooting Help: Is my html file incorrectly linked to my javascript file?
I am a self-taught teacher and would be very grateful if someone could give me some tips on how to get the next animated menu in hexagons that I downloaded from the 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 the code knob into each file, the menu doesn't seem to work. The chapter of my file that links to js and css looks like this:
<!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 from the codepen is in the body tag; css in hexmenu.css and javascript in hexmenu.js file. Each of them was pasted directly into different files, respectively, from the code without changes (there is nothing in these files), so I am a bit puzzled as to why this does not work. Any advice ?! The css document seems to work, but I think there is something wrong at the end of the javascript. Can anyone let me know what I am missing? I even created a jsfiddle to test if the code itself was working and everything went smoothly. But when I put the files on my desktop and run it on google chrome and firefox, the menu won't open ... An easy fix would be a godsend at this point! I figure as a beginner, I must be missing something obvious here ...
source to share
You need window.onload
javascript. I test the following code in my local by adding window.onload
and now it works like a charm, as in codepen.
Here I am adding all the code in the same HTML page that you can strip the javascript.
Use the 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 this helps. Link to script
source to share