0

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

4
  • 1
    Por favor, escribí en el título cuál es el problema, para tener una idea rápida de lo que dice el enunciado de tu pregunta. Leé Cómo preguntar y haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    Commented el 17 ene. 2022 a las 14:21
  • 1
    Por otra parte, ¿tu código JS está gestionado en el evento DOMContentLoaded?
    – padaleiana
    Commented el 17 ene. 2022 a las 14:24
  • Hola, ahí modificaré el título. Y contestando lo otro, no estoy gestionando el evento DOMContentLoaded. Commented el 17 ene. 2022 a las 16:42
  • Intentá lo de 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)
    – padaleiana
    Commented el 17 ene. 2022 a las 16:46

1 respuesta 1

1

Me da la impresión de que tu script se tiene que ejecutar luego de cargar la página y haber creado el DOM, de forma que pueda acceder a los eventos de este.

La forma más sencilla de lograr esto es aplicando el atributo "defer" en el script:

<script type="text/javascript" src="{% static 'js/animations.js' %}" defer></script>
1
  • Muchas gracias, tenía que agregar el "defer" al final del script y utilizar el DOMContentLoaded en el script de JS. Commented el 17 ene. 2022 a las 17:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.