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;
}
active
según corresponda ?? eso?