navbar 2022

navbar 2022

html

<nav>
    <ul>
        <li><a class="link active" href="#">الرئيسية</a></li>
        <li><a class="link" href="#">المدونة</a></li>
        <li><a class="link" href="#">الاقسام</a></li>
        <li><a class="link" href="#">من نحن</a></li>
        <li><a class="link" href="#">اتصل بنا</a></li>
    </ul>
</nav>

css

nav {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    background: linear-gradient(to left,green, red);
}
ul li a {
    padding: 1rem 2rem;
    color: #fff;
    background-color: #161623;
    text-decoration: none;
    transition: 0.5s ease;
}
ul li a.active {
    background-color: transparent;
}

javascript

const links = document.querySelectorAll(".link");
function removAddClass() {
    links.forEach(link => {
        link.classList.remove("active");
        this.classList.add("active");
    });
}
links.forEach(link => {
    link.addEventListener("click", removAddClass);
});
مصدر الاكواد