0

Estoy utilizando un menú lateral en el cual para simplificar código hago uso de un layout colocando el código HTML de este menú lateral y al momento de trabajar en las rutas de navegación presentes en este menú las hereda del layout al igual que su estilo. El problema que presenta este código es que utiliza una propiedad que indica que página está activa actualmente el usuario pero al ser heredada del layout esa propiedad queda fijada en el HTML y no varía en función de las páginas que navegue el usuario.

¿Se puede cambiar esa propiedad list active que utiliza cada ruta del menu cuándo sea presionada y qué se refleje en la página seleccionada mediante JavaScript?

Código HTML del menú PÁGINA PRINCIPAL

<!DOCTYPE html>
<html lang="en">

<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">
    <link rel="stylesheet" href="style.css">
    <!-- Iconos -->
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
</head>

<body>

    <div class="navigation">
        <ul>
            <li class="list">
                <b></b>
                <b></b>
                <a href="#">
                    <span class="icon">
                        <ion-icon name="home-outline"></ion-icon>
                    </span>
                    <span class="title">Home</span>
                </a>
            </li>

            <li class="list">
                <b></b>
                <b></b>
                <a href="page1.html">
                    <span class="icon">
                        <ion-icon name="person-outline"></ion-icon>
                    </span>
                    <span class="title">Profile</span>
                </a>
            </li>

            <li class="list">
                <b></b>
                <b></b>
                <a href="page2.html">
                    <span class="icon">
                        <ion-icon name="mail-outline"></ion-icon>
                    </span>
                    <span class="title">Contact us</span>
                </a>
            </li>


        </ul>
    </div>

    <div class="toggle">
        <ion-icon name="menu-outline" class="open"></ion-icon>
        <ion-icon name="close-outline" class="close"></ion-icon>
    </div>

    <script type="text/javascript">
        let menuToggle = document.querySelector('.toggle')
        let Navigation = document.querySelector('.navigation')
        menuToggle.onclick = function () {
            menuToggle.classList.toggle('active')
            Navigation.classList.toggle('active')
        }

        let list = document.querySelectorAll('.list');
        for (let i = 0; i < list.length; i++) {
            list[i].onclick = function () {
                let j = 0;
                while (j < list.length) {
                    list[j++].className = 'list'
                }
                list[i].className = 'list active';
            }
        }
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".open").click(function () {
                $(".m-soft").css('display', 'block');

            });
            $(".close").click(function () {
                $(".m-soft").css('display', 'none');
            });
        });
    </script>
</body>

</html>

Código HTML PÁGINA 1

<!DOCTYPE html>
<html lang="en">

<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">
    <link rel="stylesheet" href="css/estilos.css">
    <!-- Iconos -->
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
</head>

<body>
    <h2 style="margin-left: 20%;">page</h2>
    <h1 style="margin-left: 20%; color: red;">1</h1>

    <div class="navigation">
        <ul>
            <li class="list active">
                <b></b>
                <b></b>
                <a href="#">
                    <span class="icon">
                        <ion-icon name="home-outline"></ion-icon>
                    </span>
                    <span class="title">Home</span>
                </a>
            </li>

            <li class="list">
                <b></b>
                <b></b>
                <a href="page1.html">
                    <span class="icon">
                        <ion-icon name="person-outline"></ion-icon>
                    </span>
                    <span class="title">Profile</span>
                </a>
            </li>

            <li class="list">
                <b></b>
                <b></b>
                <a href="page2.html">
                    <span class="icon">
                        <ion-icon name="mail-outline"></ion-icon>
                    </span>
                    <span class="title">Contact us</span>
                </a>
            </li>


        </ul>
    </div>

    <div class="toggle">
        <ion-icon name="menu-outline" class="open"></ion-icon>
        <ion-icon name="close-outline" class="close"></ion-icon>
    </div>

    <script type="text/javascript">
        let menuToggle = document.querySelector('.toggle')
        let Navigation = document.querySelector('.navigation')
        menuToggle.onclick = function () {
            menuToggle.classList.toggle('active')
            Navigation.classList.toggle('active')
        }

        let list = document.querySelectorAll('.list');
        for (let i = 0; i < list.length; i++) {
            list[i].onclick = function () {
                let j = 0;
                while (j < list.length) {
                    list[j++].className = 'list'
                }
                list[i].className = 'list active';
            }
        }
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".open").click(function () {
                $(".m-soft").css('display', 'block');

            });
            $(".close").click(function () {
                $(".m-soft").css('display', 'none');
            });
        });
    </script>
</body>

</html>

Código HTML PÁGINA 2

<!DOCTYPE html>
<html lang="en">

<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">
    <link rel="stylesheet" href="css/estilos.css">
    <!-- Iconos -->
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
</head>

<body>
    <h2 style="margin-left: 20%;">page</h2>
    <h1 style="margin-left: 20%; color: red;">2</h1>

    <div class="navigation">
        <ul>
            <li class="list active">
                <b></b>
                <b></b>
                <a href="#">
                    <span class="icon">
                        <ion-icon name="home-outline"></ion-icon>
                    </span>
                    <span class="title">Home</span>
                </a>
            </li>

            <li class="list">
                <b></b>
                <b></b>
                <a href="page1.html">
                    <span class="icon">
                        <ion-icon name="person-outline"></ion-icon>
                    </span>
                    <span class="title">Profile</span>
                </a>
            </li>

            <li class="list">
                <b></b>
                <b></b>
                <a href="page2.html">
                    <span class="icon">
                        <ion-icon name="mail-outline"></ion-icon>
                    </span>
                    <span class="title">Contact us</span>
                </a>
            </li>


        </ul>
    </div>

    <div class="toggle">
        <ion-icon name="menu-outline" class="open"></ion-icon>
        <ion-icon name="close-outline" class="close"></ion-icon>
    </div>

    <script type="text/javascript">
        let menuToggle = document.querySelector('.toggle')
        let Navigation = document.querySelector('.navigation')
        menuToggle.onclick = function () {
            menuToggle.classList.toggle('active')
            Navigation.classList.toggle('active')
        }

        let list = document.querySelectorAll('.list');
        for (let i = 0; i < list.length; i++) {
            list[i].onclick = function () {
                let j = 0;
                while (j < list.length) {
                    list[j++].className = 'list'
                }
                list[i].className = 'list active';
            }
        }
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".open").click(function () {
                $(".m-soft").css('display', 'block');

            });
            $(".close").click(function () {
                $(".m-soft").css('display', 'none');
            });
        });
    </script>
</body>

</html>

Código Estilo CSS

.navigation {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 70px;
    border-radius: 0 20px 20px 0;
    box-sizing: initial;
    border-left: 5px solid #2e343b;
    border-right: 10px solid #4087ee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    background: #2e343b;
    transition: 0.5s;
    overflow-x: hidden;
    z-index: 2300;

}

.navigation.active {
    width: 210px;
}

.navigation ul {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-left: 5px;
    padding-top: 75px;



}

.navigation ul li {
    position: relative;
    display: block;
    width: 100%;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    transition: 0s;

}

.navigation ul li.active {
    background: #4087ee;
    transition: 0s;
}

.navigation ul li b:nth-child(1) {
    position: absolute;
    top: -20px;
    height: 20px;
    width: 100%;
    background: #4087ee;
    display: none;



}

.navigation ul li b:nth-child(1)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom-right-radius: 20px;
    background: #2e343b;

}

.navigation ul li b:nth-child(2) {
    position: absolute;
    bottom: -20px;
    height: 20px;
    width: 100%;
    background: #4087ee;
    display: none;



}

.navigation ul li b:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top-right-radius: 20px;
    background: #2e343b;

}

.navigation ul li.active b:nth-child(1),
.navigation ul li.active b:nth-child(2) {
    display: block;

}

.navigation ul li a {
    position: relative;
    display: block;
    width: 100%;
    display: flex;
    text-decoration: none;
    color: #fff;

}

.navigation ul li.active a {
    color: white;
}

.navigation ul li a .icon {
    position: relative;
    display: block;
    min-width: 60px;
    height: 60px;
    line-height: 70px;
    text-align: center;

}

.navigation ul li a .icon ion-icon {
    font-size: 2.2em;
}

.navigation ul li a .title {
    position: relative;
    display: block;
    top: -2.5px;
    padding-left: 10px;
    height: 60px;
    line-height: 60px;
    white-space: normal;
    font-size: 1.5em;



}

.toggle {
    position: fixed;
    top: 18px;
    left: 25px;
    float: left;
    transition: 0.5s;
    z-index: 2300;


}

.m-soft {
    color: hsl(165, 72%, 65%);
    font-size: 25px;
    display: none;
    position: absolute;
    top: 20px;
    left: 32px;


}

.toggle.active {
    left: 175px;
}

.toggle ion-icon {
    position: absolute;
    color: rgb(255, 187, 41);
    font-size: 34px;
    display: none;

}

.toggle ion-icon.open,
.toggle.active ion-icon.close {
    display: block;



}

.toggle ion-icon.close,
.toggle.active ion-icon.open {
    display: none;

}
2
  • En palabras simples, lo que quieres es que cuando el usuario entre a una página el menú muestre active según corresponda ?? eso?
    – Yussef
    Commented el 22 feb. 2023 a las 22:57
  • Sí compañero. Porque el list active está por default en la primer página y por mas que ingreses a otra de las páginas del menú sigue anclado en la que tiene list active. En resumen la página que tenga list active en el html es la que aparecerá como marcada. Espero haber aclarado tu duda sino avisame y trataré de explicarlo mejor
    – Lucas
    Commented el 22 feb. 2023 a las 23:41

1 respuesta 1

0

Según lo interpretado con la intención de que cada vez que se presiones sobre un elemento de la lista se modifique el 'estado' de 'active' al nuevo elemento en el que se hace click se podría solucionar aplicando lo siguiente:

<script>
    //Por comodidad es mejor trabajar con un arreglo de nodos.
    const list = Array.from(document.querySelectorAll('.list'));

    //Le asignamos a todos los elementos el listener para el evento 'click'.
    list.forEach(li => li.addEventListener('click', (event) => {

        //Cuando se de click en un elemento, primero vamos a encargarnos de remover la clase 'active' de todos los elementos que podrían contenerla.
        list.forEach( li => li.classList.remove('active'))

        //Y posteriormente se la asignamos al elemento en el que se escuchó el evento de 'click'.
        event.currentTarget.classList.add('active')
    }))

</script>
3
  • 1
    Compañero probé tu código pero no tuve resultados. Acabo de editar la pregunta original y publiqué el código completo y resumido para que puedas testear y comprobar personalmente como funciona el menú y el problema al cambiar de página. Estaré atentamente a tu respuesta, ojala puedas encontrar la solución. Para que funcionen los archivos es necesario 3 arhivos html y 1 css en ellos pegas todo el código de la pregunta principal. Tal vez tu código funciona pero yo lo estoy colocando mal. Cuando tengas tiempo revísalo. No tengo apuro. @ChristianMaccarino
    – Lucas
    Commented el 23 feb. 2023 a las 18:55
  • Veo el error cometido, deduje por los datos suministrados inicialmente que era una SPA (Single Page Application) y no una MPA (Multi-Page Application). Para estos casos lo que debes recordar es que cada página web es un documento individual, así que lo que se hace es a cada página indicarle de forma manual cual componente tiene que tener el 'active' porque una vez vos te cambias de página, básicamente se 'reescribe' la configuración. Haciendo esto funcionará normalmente. Commented el 24 feb. 2023 a las 11:55
  • entiendo a lo que te referís. El código suministrado es una versión simplificada con el fin de que cara usuario del foro pueda hacer el test de una manera simplificada. Yo en mi página original tengo este mismo código pero en el layout e colocado la estructura del menu y en las otras páginas extiendo de ese layout el formato del menu por eso consultaba si podía cambiar la propiedad ya qué en la página original es una MPA y el código que pasé en el foro es un SPA. Si no hay ninguna solución posible colocaré la que me recomendaste cambiar la configuración en cada archivo html @ChristianMaccarino
    – Lucas
    Commented el 24 feb. 2023 a las 20:21

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.