Menú Animado

7,837 0 codex Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

10 July 2025

Efecto de desplazamiento de botón animado CSS

20 September 2025

Fuegos artificiales animados con CSS, luciérnagas y girasoles

HTML

<html lang="en" class="">
  <head>
    <meta charset="UTF-8" />
    <title>Animated Menu</title>

CSS

html {

box-sizing: border-box;
--bgColorMenu : #1d1d27;
--duration: .7s;

}

html *,
html *::before,
html *::after {

box-sizing: inherit;

}

body{

margin: 0;
display: flex;
height: 100vh;
overflow: hidden;
align-items: center;
justify-content: center;
background-color: #ffb457;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--duration);

}

.menu{

margin: 0;
display: flex;
/* Works well with 100% width  */
width: 32.05em;
font-size: 1.5em;
padding: 0 2.85em;
position: relative;
align-items: center;
justify-content: center;
background-color: var(--bgColorMenu);

}

.menu__item{

all: unset;
flex-grow: 1;
z-index: 100;
display: flex;
cursor: pointer;
position: relative;
border-radius: 50%;
align-items: center;
will-change: transform;
justify-content: center;
padding: 0.55em 0 0.85em;
transition: transform var(--timeOut , var(--duration));

}

.menu__item::before{

content: "";
z-index: -1;
width: 4.2em;
height: 4.2em;
border-radius: 50%;
position: absolute;
transform: scale(0);
transition: background-color var(--duration), transform var(--duration);

}

.menu__item.active {

transform: translate3d(0, -.8em , 0);

}

.menu__item.active::before{

transform: scale(1);
background-color: var(--bgColorItem);

}

.icon{

width: 2.6em;
height: 2.6em;
stroke: white;
fill: transparent;
stroke-width: 1pt;
stroke-miterlimit: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 400;

}

.menu__item.active .icon {

animation: strok 1.5s reverse;

}

@keyframes strok {

100% {

stroke-dashoffset: 400;

}

.menu__border{

left: 0;
bottom: 99%;
width: 10.9em;
height: 2.4em;
position: absolute;
clip-path: url(#menu);
will-change: transform;
background-color: var(--bgColorMenu);
transition: transform var(--timeOut , var(--duration));

}

.svg-container {

width: 0;
height: 0;
}

@media screen and (max-width: 50em) {
.menu{
    font-size: .8em;
}
}

"use strict";

const body = document.body;
const bgColorsBody = ["#ffb457", "#ff96bd", "#9999fb", "#ffe797", "#cffff1"];
const menu = body.querySelector(".menu");
const menuItems = menu.querySelectorAll(".menu__item");
const menuBorder = menu.querySelector(".menu__border");
let activeItem = menu.querySelector(".active");

function clickItem(item, index) {

menu.style.removeProperty("--timeOut");
    
    if (activeItem == item) return;
    
    if (activeItem) {
        activeItem.classList.remove("active");
    }

item.classList.add("active");
    body.style.backgroundColor = bgColorsBody[index];
    activeItem = item;
    offsetMenuBorder(activeItem, menuBorder);
    
    
}

function offsetMenuBorder(element, menuBorder) {

const offsetActiveItem = element.getBoundingClientRect();
    const left = Math.floor(offsetActiveItem.left - menu.offsetLeft - (menuBorder.offsetWidth  - offsetActiveItem.width) / 2) +  "px";
    menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;

}

offsetMenuBorder(activeItem, menuBorder);

menuItems.forEach((item, index) => {

item.addEventListener("click", () => clickItem(item, index));
    
})

window.addEventListener("resize", () => {
    offsetMenuBorder(activeItem, menuBorder);
    menu.style.setProperty("--timeOut", "none");
});

Comments 0

…