Quisiera saber si alguien tuvo el mismo problema o similar... El problema en si es el siguiente... Estoy realizando mi portafolio y estoy haciendo un "Menú Lateral" que quiero que quien lo vea pueda abrirlo y cerrarlo. La animación es que se oculte y hacia la izquierda y se abra hacia la derecha. Estuve mirando varios videos e hice que funcione, pero cuando lo implemento en Django no funciona el script de JS. Ya verifiqué todo y esta correctamente importado todo y reconoce el navegador los scripts y los estilos pero cuando hago click en el boton para que realice la animación no hace nada. Quisiera saber si alguien tiene alguna idea de por que sucede esto... la verdad estoy hace bastante tiempo tratando de solucionarlo pero no encuentro nada...
Les dejo todo al menos la parte del frontend JS, CSS y HTML... lo que seria Django es super sencillo una app solo para mostrar el template y el archivo settings.py ya esta configurado para reconocer los archivos statics e images.
/* Menu Show & Hidden */
const navMenu = document.getElementById('nav-menu'),
navToggle = document.getElementById('nav-toggle'),
navClose = document.getElementById('nav-close')
/* Nav Open */
/* Validate if constant exists */
if (navToggle){
navToggle.addEventListener('click', () =>{
navMenu.classList.add('show__menu')
})
}
/* Nav Close */
/* Validate if constant exists */
if(navClose){
navClose.addEventListener('click', () =>{
navMenu.classList.remove('show__menu')
})
}
/* VARIABLES */
:root {
/* Colores para el Modo Oscuro */
--primary-color--dm: linear-gradient(#d4fc79, #96e6a1);
--secondary-color--dm: linear-gradient(#accbee, #e7f0fd);
/* Colores para el Modo Claro */
--backgroundcolor-page: rgb(255, 255, 255);
--letters-primary--color: #000;
--content-hover: rgb(58, 47, 47);
--primary-color--lm: rgb(67, 148, 20);
--secondary-color--lm: rgb(10, 134, 83);
--fw-large: 600;
--fw-medium: 400;
--fw-small: 300;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-family: 'Source Sans Pro', sans-serif;
}
/* Line Menu */
hr {
border-bottom:solid 1px var(--letters-primary--color);
width:100%;
height: 1px;
box-shadow: var(--letters-primary--color);
}
h2 {
font-weight: var(--fw-medium);
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: var(--letters-primary--color);
font-weight: var(--fw-medium);
font-size: 18px;
}
img {
max-width: 100%;
height: auto;
}
body {
background-color: var(--backgroundcolor-page);
}
header {
position: relative;
display: flex;
width: 100%;
min-width: 320px;
height: 100%;
}
@media screen and (max-width: 767px) {
.nav__container {
position: relative;
padding-top: 15px;
left: -100%;
max-width: 340px;
height: 100vh;
box-shadow: 0 -2px 4px rgba(0, 0, 0, .15);
border-radius: 0 1.5rem 1.5rem 0;
transition: .3s;
}
}
.nav__container{
position: relative;
left: -100%;
flex-direction: row;
max-width: 340px;
height: 100vh;
}
.button_hide__menu{
padding-top: 10px;
padding-left: 160px;
padding-bottom: 5px;
cursor: pointer;
}
.title_lateral__menu{
padding-bottom: 5px;
font-weight: var(--fw-large);
padding-left: 20px;
}
.h3 {
padding-top: 650px;
font-weight: var(--fw-large);
font-size: 20px;
text-align: center;
}
.li__item {
text-align: left;
padding-top: 20px;
padding-left: 20px;
word-spacing: 5px;
}
.home__social-icon {
align-self: center;
}
.item__reference:hover {
color: var(--primary-color--lm);
}
.nav__toggle {
position: absolute;
cursor: pointer;
left: 0;
padding: 10px;
}
.show__menu {
left: 0;
flex-direction: row;
max-width: 340px;
height: 100vh;
}
<!DOCTYPE html>
{% load static %}
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Web</title>
<!-- Meta's for eliminate Cache -->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
<!-- UNICONS -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap" rel="stylesheet">
<!-- JavaScript -->
<script type="text/javascript" src="{% static 'js/animations.js' %}"></script>
</head>
<body>
<header class="header">
<div class="nav__container">
<!-- Lateral Menu -->
<nav class="nav__menu" id="nav-menu">
<h2 class="title_lateral__menu" id="title_lateral__menu">Menú<i class="uil uil-angle-left-b button_hide__menu" id="nav-close"></i></h2>
<hr>
<ul class="ul__container">
<li class="li__item">
<a href="#inicio" class="item__reference">
Inicio
<i class="uil uil-house-user"></i>
</a>
</li>
<li class="li__item">
<a href="#estudios-conocimientos" class="item__reference">
Estudios y Conocimientos
<i class="uil uil-book-open"></i>
</a>
</li>
<li class="li__item">
<a href="#mas-sobre-mi" class="item__reference">
Más Sobre Mí...
<i class="uil uil-user-plus"></i>
</a>
</li>
</ul>
<h3 class="h3">Contacto</h3>
<ul class="ul__container">
<li class="li__item">
<a href="www.linkedin.com/in/lautaro-gonzalez00" class="home__social-icon">
<i class="uil uil-linkedin">LinkedIn</i>
</a>
<a href="https://github.com/Lautaro-Code" class="home__social-icon">
<i class="uil uil-github">GitHub</i>
</a>
<a href="https://www.instagram.com/lautygz/" class="home__social-icon">
<i class="uil uil-instagram-alt">Instagram</i>
</a>
</li>
</ul>
</nav>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class="uil uil-bars"></i>
</div>
</header>
</body>
</html>
Cualquier otra cosa en la que sea redundante o consideren lo optimo para mejorar mi código estoy abierto a cualquier tipo de respuesta y corrección :D
DOMContentLoaded
?DOMContentLoaded
. Lo más probable es que el HTML de tu página aún no termina de cargarse cuando se ejecuta el script. (Es más, fijate si en la consola del navegador te muestra algún error)