Menu Underline effect 1

by davidxmartins

HTML

<header class="menu-big">

  <span class="logo">DAVID MARTINS</span>

  <div class="menu-container">
    <nav class="menu">
      <ul class="menu__list">
        <li><a href="#" class="menu__link">Work</a></li>
        <li><a href="#" class="menu__link">Services</a></li>
        <li><a href="#" class="menu__link">Journal</a></li>
        <li><a href="#" class="menu__link">Info</a></li>
      </ul>
    </nav>
  </div>

</header>

CSS

/* 
====================
General Styles
====================
*/

body {
  font-family: "poppins", sans-serif;
}



/* 
====================
Menu Big
====================
*/

/* Container */

header.menu-big {
    position: absolute;
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: ;
    height: auto;
    box-sizing: border-box;
    padding: 20px;
    z-index: 9;
}



/* Logo */

.logo {
    font-size: 25px;
    font-weight: 600;
}



/* menu */

.menu-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.menu__list {
    --color-underline: black;
    --underline-width: 0;
    --underline-offset-x: 0;
    position: relative;
    display: inline-flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu__list::before {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    height: 3px;
    width: var(--underline-width);
    transform: translateX(var(--underline-offset-x));
    background-color: black;
    transition: transform 0.5s, width 0.5s;
    border-radius: ;
}

.menu__link {
    display: block;
    padding: 0.5rem 1.65vw;
    color: black;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .1rem;
}

JavaScript

// Underline effect for menu items

const menu = document.querySelector(".menu__list");
menu.addEventListener("mouseover", (event) => {
    if (event.target.classList.contains("menu__link")) {
        menu.style.setProperty(
            "--underline-width",
            `${event.target.offsetWidth}px`
        );
        menu.style.setProperty(
            "--underline-offset-x",
            `${event.target.offsetLeft}px`
        );
    }
});
menu.addEventListener("mouseleave", () =>
    menu.style.setProperty("--underline-width", "0")
);