It all works fine in the preview here, but when I have it running in any other software, the JavaScript doesn't link - I know this because of two things:
JavaScript being linkedJavaScript is meant to make it that all the items come down when you click on the menu button, but none of that is happening here.I have tried making rel="script", but that doesn't do anything.
var open = false;
function Drop(n) {
var i;
if (open == false) {
for (i = n; i < 5; i++) {
Drp(i)
}
open = true
} else if (open == true) {
for (i = n; i < 5; i++) {
Cls(i)
}
open = false
}
}
function Drp(n) {
var elem = document.getElementsByClassName("menu-con")[n];
var pos = -1 * window.innerHeight - n * 100;
var id = setInterval(frame, 5);
function frame() {
if (pos >= -10) {
clearInterval(id);
elem.style.top = 0 + 'px';
} else {
pos += 10;
elem.style.top = pos + 'px';
}
}
}
function Cls(n) {
var elems = document.getElementsByClassName("menu-con")[n];
var poss = 0;
var ids = setInterval(frames, 5);
function frames() {
if (poss <= -1 * window.innerHeight) {
clearInterval(ids);
elems.style.top = -1 * window.innerHeight + 'px';
} else {
poss += -7 - n * 2;
elems.style.top = poss + 'px';
}
}
}* {box-sizing: border-box;max-width: 100%;font-family: 'Gruppo', cursive;}
html,body {height: 100%;margin: 0;padding: 0;background:rgb(240,240,240)}
.menu-icon {width: 50px;height: 50px;position: fixed;top: 0;right: 0;margin: 10px 15px;transform:scale(0.8);padding: 0;cursor: pointer;z-index:20}
.menu-bar {width: 50px;height: 5px;background: rgb(190,190,190);position: absolute;transition: all 0.3s;}
.menu-bar1 {margin-top: 9px}
.menu-bar2 {margin-top: 23px}
.menu-bar3 {margin-top: 37px}
.menu-icon.hover .menu-bar1 {-webkit-transform: rotate(45deg) scaleX(0.7);margin-top: 22px;}
.menu-icon.hover .menu-bar2 {opacity: 0}
.menu-icon.hover .menu-bar3 {-webkit-transform: rotate(-45deg) scaleX(0.7);margin-top: 22px;}
.menu {width: 100%;height: 100%;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.menu-con {-webkit-flex-grow: 1;flex-basis: 0;flex-grow: 1;display: -webkit-flex;display: flex;-webkit-justify-content:space-around;position:relative;top:-100%;transition:all 0.5s}
.menu-con p:before {content: ""; display: block;position:absolute;top:0;left:0;z-index:1;width:100%;height: 100%;opacity: 1;background: rgba(0,0,0,0);-webkit-transition: all 0.5s;transition: all 0.5s;}
.menu-con:hover p:before {background: rgba(0,0,0,0.2)}
.menu-con p {height:20px;-webkit-align-self:center;color:white;font-size:25px;z-index:2;cursor:pointer}
@media screen and (max-width: 600px) {.menu-con {min-width:50%}}
@media screen and (max-width: 350px) {.menu-con {min-width:100%}}<link href=style.css rel="stylesheet">
<link href="main.js">
<div class="menu-icon" onclick="this.classList.toggle('hover');Drop(0)">
<div class="menu-bar menu-bar1"></div>
<div class="menu-bar menu-bar2"></div>
<div class="menu-bar menu-bar3"></div>
</div>
<div class="menu">
<div class="menu-con" style="background:IndianRed;"><p>HOME</p></div>
<div class="menu-con" style="background:rgb(160,160,170);"><p>GALLERY</p></div>
<div class="menu-con" style="background:mediumseagreen;"><p>PRODUCTS</p></div>
<div class="menu-con" style="background:teal;"><p>ABOUT</p></div>
<div class="menu-con" style="background:rgb(70,70,70);"><p>CONTACT</p></div>
</div>You can include your JavaScript file in the following ways - These examples show how to import script using the <script> element in both HTML4 and HTML5 (Script element - Basic usage):
<!-- HTML4 -->
<script type="text/javascript" src="javascript.js"></script>
<!-- HTML5 -->
<script src="main.js"></script>
My suggestion would be to go with the following HTML5 one:
<script src="main.js"></script>
The HTML script element is used to embed or reference executable code; this is typically used to embed or refer to JavaScript code.
Source: The Script element
Link is used for style sheets, you can read further here: HTML link Tag