I am writing a Django website. I am trying to use a JavaScript file to move a mobile nav bar into the page when clicking on the burger icon.
I have successfully loaded a JavaScript file from the static folder. (I checked with the alert function.)
However, once I write more code in the JavaScript file, the JavaScript file doesn't work and I don't get the alert "Hello, javascript file loaded" upon refreshing the website page. Is my javascript incorrect? Is the format incorrect for use in Django?
Any help would be much appreciated, thanks for reading.
App.js
alert("Hello, javascript file loaded");
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
burger.addEventListener('click', () = > {
nav.classList.toggle('nav-active');
});
}
navSlide();
Base.html
{% load static %}
<html>
<head>
<title>Pep Genie</title>
<link rel="stylesheet" type="text/css" href="{% static 'genie/style.css' %}">
</head>
<body>
{% block content %}{% endblock %}
<script src="{% static 'genie/app.js' type="text/javascript" %}"></script>
</body>
</html>
Index.html
{% extends 'genie/base.html' %}
{% block content %}
<nav>
<div class="logo">
<h4>The Logo</h4>
</div>
<ul class="nav-links">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Work</a>
</li>
<li>
<a href="#">Our Projects</a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
Style.css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: navy;
color: lightgray;
font-family: Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
nav .logo {
margin: 0 100px 0 0;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
nav li {
list-style: none;
}
nav a {
text-decoration: none;
color: lightgray;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 2px;
margin: 4px;
background-color: lightgray;
}
@media screen and (max-width: 1000px) {
.nav-links {
width: 50%;
}
}
@media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
top: 8vh;
height: 92vh;
background-color: navy;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
question from:
https://stackoverflow.com/questions/65860922/django-burger-menu-with-javascript-static 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
