Простая навигация с JavaScript

HTML:

<div class="header_nav">

<ul>

<li><a href="#">Пункт меню</a></li>

<li><a href="#">Пункт меню</a></li>

<li><a href="#">Пункт меню</a></li>

<li><a href="#">Пункт меню</a></li>

</ul>

</div>

<div class="navig_bar">

<span onclick="Color('#158567')" style="--cr:#1dd1a1"></span>

<span onclick="Color('#3066BE')" style="--cr:#3066BE"></span>

<span onclick="Color('#6D9DC5')" style="--cr:#6D9DC5"></span>

<span onclick="Color('#f368e0')" style="--cr:#f368e0"></span>

<span onclick="Color('#ff9f43')" style="--cr:#ff9f43"></span>

</div>

CSS:

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background: #1f1f1f;

position: relative;

min-height: 1500px;

}

.header_nav {

display: flex;

background: #28292b;

height: 50px;

transition: 0.5s;

box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.25);

justify-content: center;

align-items: center;

}

.header_nav ul {

display: flex;

gap: 20px;

list-style: none;

}

.header_nav ul li a {

color: #fff;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

text-decoration: none;

text-transform: uppercase;

}

.navig_bar {

position: fixed;

left: 5px;

top: 100px;

padding: 30px 10px;

background: #28292b;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

border-radius: 10px;

box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.25);

}

.navig_bar span {

position: relative;

width: 50px;

height: 20px;

border-radius: 20px;

background: #1f1f1f;

margin: 5px 0px;

cursor: pointer;

}

.navig_bar span::before {

content: '';

position: absolute;

left: 0;

width: 20px;

height: 20px;

background: var(--cr);

border-radius: 20px;

transition: 0.5s;

scale: 0.8;

opacity: 0.25;

}

.navig_bar span:hover::before {

left: 20px;

opacity: 1;

scale: 1;

}

Javascript:

let header_nav = document.querySelector('.header_nav');

function Color(color) {

header_nav.style.background = color;

document.querySelectorAll('span').forEach(function (item) {

Element.classList.remove('');

});

}

Ссылка на просмотр видео Rutube