Navigation Tabs Menu

html

<ul>
    <li class="li active">
        <a href="#" style="--i:#2980b9"><i class="fa-solid fa-house"></i></a>
        <span>Home</span>
    </li>
    <li class="li">
        <a href="#" style="--i:#d35400"><i class="fa-solid fa-feather"></i></a>
        <span>Blog</span>
    </li>
    <li class="li">
        <a href="#" style="--i:#27ae60"><i class="fa-solid fa-briefcase"></i></a>
        <span>Work</span>
    </li>
    <li class="li">
        <a href="#" style="--i:#8e44ad"><i class="fa-solid fa-phone"></i></a>
        <span>Contact</span>
    </li>
</ul>

css

ul {
    list-style: none;
    background-color: #2f363e;
    display: inline-block;
    padding: 0 20px;
    height: 65px;
    border-radius: 7px;
}
ul li {
    display: inline-block;
    padding: 0 10px;
    text-align: center;
    position: relative;
    height: 65px;
    width: 50px;
}
ul li::before {
    content: "";
    position: absolute;
    border: 10px solid transparent;
    border-bottom-color: #fff;
    bottom: -10px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%);
    transition: 0.5s;
}
ul li a {
    position: absolute;
    display: flex;
    color: #fff;
    font-size: 25px;
    padding: 10px 15px;
    border-radius: 7px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: 0.5s;
    transition-delay: 0.1s;
    text-decoration: none;
}
ul li span {
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%);
    transition: 0.5s;
}
ul li.active::before {
    opacity: 1;
    bottom: 0;
}
ul li.active a {
    background-color: var(--i);
    top: -5px;
}
ul li.active span {
    opacity: 1;
    bottom: 15px;
}

javascript

let li = document.querySelectorAll("ul li");

function removeActive() {
    li.forEach(link => {
            link.classList.remove("active");
    });
}

li.forEach(link => {
    link.addEventListener('click', () => {
        removeActive();
        link.classList.add("active");
    })
});

مصدر الاكواد