Wed Dec 27 2023
Menubar with Top Border Animations
CSS182 views
File Name: menubar-with-top-border-animations.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animated Menu Bar Top</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #09abeb;
}
section#container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.svgContainer {
width: 0;
height: 0;
}
nav {
background-color: #292929;
padding: 0 50px;
border-radius: 8px;
display: flex;
gap: 20px;
position: relative;
}
nav .topBorder {
position: absolute;
left: 0;
bottom: 99%;
width: 180px;
height: 0;
clip-path: url(#menu);
will-change: transform;
background-color: #292929;
z-index: -1;
transition: 0.3s all ease-out;
}
nav .topBorder.active {
height: 40px;
}
button {
background-color: transparent;
border: none;
padding: 15px;
border-radius: 100%;
cursor: pointer;
transition: 0.3s all ease-out;
}
button svg {
width: 50px;
height: 50px;
fill: #fff;
stroke: #fff;
}
button.active {
transform: translate3d(0, -15px, 0);
background-color: #ff8c00;
}
</style>
<script>
const elements = document.getElementsByClassName("menuItem");
const toggleMenu = (index) => {
for (let i = 0; i < elements.length; i++) {
if (i == index) elements[i].classList.add("active");
else elements[i].classList.remove("active");
}
const tBorder = document.querySelector(".topBorder");
tBorder.classList.add("active");
tBorder.style.left = `${100 * index}px`;
};
</script>
</head>
<body>
<section id="container">
<nav>
<div class="topBorder"></div>
<button type="button" onclick="toggleMenu(0)" class="menuItem">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 537.01 537.01">
<path
d="m268.51,14c140.6.13,254.48,114.21,254.35,254.81-.09,102.15-61.23,194.35-155.29,234.19-129.7,54.27-278.83-6.88-333.1-136.58C-19.54,237.35,40.74,88.89,169.43,34c31.34-13.27,65.03-20.07,99.06-20m0-14C120.21,0,0,120.21,0,268.51s120.21,268.5,268.51,268.5,268.5-120.21,268.5-268.5S416.8,0,268.51,0h-.02Z"
/>
<path
d="m161.15,398.75h61c5.95,0,10.77-4.83,10.77-10.78v-92.54h72.39v92.51c0,5.95,4.82,10.77,10.77,10.78h59.78c5.95,0,10.77-4.83,10.77-10.78v-151.64c0-4.24-1.94-8.24-5.26-10.87l-106.64-84.31c-4.93-3.89-11.92-3.8-16.74.23l-102.64,85.71c-3.16,2.63-4.99,6.53-5,10.64v150.27c0,5.95,4.83,10.78,10.78,10.78,0,0,.01,0,.02,0Z"
fill="none"
stroke="#fff"
stroke-miterlimit="10"
stroke-width="14"
/>
</svg>
</button>
<button type="button" onclick="toggleMenu(1)" class="menuItem">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 537.01 537.01">
<path
d="m268.51,14c140.6.13,254.48,114.21,254.35,254.81-.09,102.15-61.23,194.35-155.29,234.19-129.7,54.27-278.83-6.88-333.1-136.58C-19.54,237.35,40.74,88.89,169.43,34c31.34-13.27,65.03-20.07,99.06-20m0-14C120.21,0,0,120.21,0,268.51s120.21,268.5,268.51,268.5,268.5-120.21,268.5-268.5S416.8,0,268.51,0h-.02Z"
/>
<path
d="m225.34,144.87h88.7c20.95.14,31.93,2.1,42.54,7.3l2.36,1.21c10.63,5.68,19.02,14.07,24.7,24.7,5.89,11.01,8.19,21.64,8.47,42.61l.03,4.66v86.33l-.03,4.66c-.28,20.97-2.58,31.6-8.47,42.61-5.68,10.63-14.07,19.02-24.7,24.7-11.01,5.89-21.64,8.19-42.61,8.47l-4.66.03h-86.33l-4.66-.03c-20.97-.28-31.6-2.58-42.61-8.47-10.63-5.68-19.02-14.07-24.7-24.7-5.89-11.01-8.19-21.64-8.47-42.61l-.03-4.66v-88.7c.14-20.95,2.1-31.93,7.3-42.54l1.21-2.36c5.68-10.63,14.07-19.02,24.7-24.7,11.01-5.89,21.64-8.19,42.61-8.47l4.66-.03Zm73.95,123.9l-51.89,61.93c-2.76,3.3-7.52,3.95-11.05,1.66l-.69-.5-28.64-23-40.11,39.47c.41.89.86,1.77,1.33,2.65,4.11,7.69,10.1,13.67,17.79,17.79,8.42,4.5,16.59,6.27,35.17,6.49l4.15.02h86.33l4.15-.02c18.59-.22,26.75-1.98,35.17-6.49,7.69-4.11,13.67-10.1,17.79-17.79,2.46-4.6,4.1-9.12,5.12-15.3l-74.61-66.92Zm12.38-107.04h-86.33l-4.15.02c-18.59.22-26.75,1.98-35.17,6.49-7.69,4.11-13.67,10.1-17.79,17.79-4.82,9.02-6.51,17.75-6.51,39.32v86.33l.02,4.15c.06,5.17.24,9.54.57,13.33l38.23-37.55c2.84-2.79,7.22-3.19,10.5-1.06l.68.5,28.05,22.51,52.17-62.26c2.87-3.43,7.88-3.99,11.42-1.41l.65.52,71.26,63.87.02-2.6v-86.33l-.02-4.15c-.22-18.59-1.98-26.75-6.49-35.17-4.11-7.69-10.1-13.67-17.79-17.79-9.02-4.82-17.75-6.51-39.32-6.51Zm-90.93,44.96c7.76,0,14.05,6.29,14.05,14.05s-6.29,14.05-14.05,14.05-14.05-6.29-14.05-14.05,6.29-14.05,14.05-14.05Z"
/>
</svg>
</button>
<button type="button" onclick="toggleMenu(2)" class="menuItem">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 537.01 537.01">
<path
d="m268.51,14c140.6.13,254.48,114.21,254.35,254.81-.09,102.15-61.23,194.35-155.29,234.19-129.7,54.27-278.83-6.88-333.1-136.58C-19.54,237.35,40.74,88.89,169.43,34c31.34-13.27,65.03-20.07,99.06-20m0-14C120.21,0,0,120.21,0,268.51s120.21,268.5,268.51,268.5,268.5-120.21,268.5-268.5S416.8,0,268.51,0h-.02Z"
/>
<path
d="m336.07,302.24c-3.95-3.73-9.89-4.41-14.58-1.67l-3.97-16.13v-.68c-.19-.43-.46-.82-.79-1.15h0l-5.6-5.6c-4.65-4.66-12.2-4.68-16.86-.03,0,0-.02.02-.03.03h0l-2.82-2.86,52.61-53.13c.94-.93,2.28-1.33,3.58-1.07,6.05,1.3,12.33,1.15,18.32-.44,13.82-3.72,24.61-14.52,28.33-28.33,1.26-4.72,1.63-9.64,1.07-14.5h0c-.49-4.36-4.43-7.5-8.79-7-1.82.21-3.52,1.04-4.8,2.35l-11.05,11.29c-1.55,1.56-4.06,1.57-5.62.02,0,0-.02-.02-.02-.02l-11.13-11.25c-.76-.77-1.18-1.82-1.15-2.9,0-1.08.42-2.11,1.19-2.86l11.09-11.29c2.16-2.17,2.89-5.38,1.87-8.27-1.03-2.82-3.57-4.82-6.56-5.17-19.61-2.18-37.85,10.36-42.84,29.44-1.59,5.97-1.74,12.24-.44,18.28.35,1.3.03,2.69-.87,3.7l-53.29,53.01-65.01-64.93-2.07-10.49c-.46-2.32-1.59-4.45-3.26-6.12l-20.78-20.78c-3.1-3.11-8.13-3.11-11.24,0,0,0,0,0,0,0l-16.85,16.85c-3.11,3.1-3.11,8.13,0,11.24,0,0,0,0,0,0l20.74,20.78c1.67,1.67,3.8,2.8,6.12,3.26l10.49,2.07,64.97,65.01-53.01,53.29c-.94.93-2.28,1.33-3.58,1.07-6.05-1.3-12.33-1.15-18.32.44-13.81,3.65-24.64,14.36-28.45,28.13-1.26,4.72-1.63,9.64-1.07,14.5.36,3.02,2.41,5.56,5.28,6.56,2.9,1.03,6.14.28,8.3-1.91l11.05-11.29c1.55-1.56,4.06-1.57,5.62-.02,0,0,.02.02.02.02l11.25,11.25c.73.74,1.15,1.74,1.15,2.78,0,1.08-.42,2.11-1.19,2.86l-11.09,11.29c-3.12,3.08-3.15,8.12-.07,11.24,1.28,1.29,2.95,2.11,4.76,2.31,1.46.16,2.94.24,4.41.24,18.07,0,33.85-12.2,38.42-29.68,1.59-5.97,1.74-12.24.44-18.28-.35-1.3-.03-2.69.87-3.7l53.29-53.01,2.86,2.82h0c-4.66,4.65-4.68,12.2-.03,16.86,0,0,.02.02.03.03l5.6,5.48h0c.33.33.72.6,1.15.79h.68l16.09,3.97c-3.12,4.8-2.38,11.14,1.75,15.1l56.23,56.11c4.65,4.65,12.19,4.65,16.85,0l16.85-16.85c4.65-4.65,4.65-12.19,0-16.85l-56.11-56.23Zm-14.42-103.75c2.83-2.84,4.04-6.92,3.22-10.85-1.03-4.79-.92-9.76.32-14.5,2.96-11.14,11.67-19.83,22.81-22.77,3.76-1.03,7.69-1.31,11.56-.83l-11.25,11.29c-4.66,4.65-4.68,12.2-.03,16.86,0,0,.02.02.03.03l11.25,11.32c4.65,4.66,12.2,4.68,16.86.03,0,0,.02-.02.03-.03l11.29-11.48h0c.36,3.86,0,7.76-1.07,11.48-2.98,11.05-11.6,19.67-22.65,22.65-4.78,1.28-9.79,1.38-14.62.32-3.94-.84-8.04.38-10.89,3.22l-53.13,53.29-16.85-16.85,53.13-53.17Zm-106.25,140.03c-2.83,2.84-4.04,6.92-3.22,10.85,1.03,4.79.92,9.76-.32,14.5-2.97,11.05-11.6,19.68-22.65,22.65-3.76,1.03-7.69,1.31-11.56.83l11.09-11.32c4.65-4.65,4.65-12.19,0-16.85l-11.25-11.21c-4.65-4.66-12.2-4.68-16.86-.03,0,0-.02.02-.03.03l-11.09,11.44c-.42-3.84-.12-7.72.87-11.44,2.95-11.14,11.64-19.84,22.77-22.81,4.78-1.26,9.79-1.36,14.62-.32,3.94.84,8.04-.38,10.89-3.22l53.01-53.13,16.85,16.85-53.13,53.17Zm86.86-57.1c1.06,0,2.07.41,2.82,1.15l2.82,2.82-22.49,22.49-2.82-2.82c-1.54-1.55-1.54-4.05,0-5.6l16.89-16.89c.74-.73,1.74-1.15,2.78-1.15Zm-136.1-132.12l6.99,7.03-16.81,16.81-7.03-6.99,16.85-16.85Zm3.97,37.63l-11.01-10.93,16.89-16.89,10.93,10.97c.56.55.95,1.26,1.11,2.03l1.91,9.62-8.23,8.23-9.62-1.91c-.77-.16-1.48-.55-2.03-1.11h.04Zm18.56,7.31l5.6-5.6,94.1,93.94-5.8,5.8-93.9-94.13Zm122.71,98.94l3.38,13.47-7.95,7.95-13.47-3.38,18.04-18.04Zm75.18,76.49h0l-16.89,16.89c-1.55,1.54-4.05,1.54-5.6,0l-56.19-56.23c-.73-.74-1.15-1.74-1.15-2.78,0-1.06.41-2.07,1.15-2.82l16.85-16.85c.75-.74,1.77-1.16,2.82-1.15,1.04,0,2.04.42,2.78,1.15l56.23,56.19c.74.75,1.16,1.77,1.15,2.82,0,1.04-.42,2.04-1.15,2.78Z"
/>
<path
d="m318.41,334.21c-.77-.76-2.01-.76-2.78,0-.78.77-.78,2.03-.01,2.81,0,0,0,0,.01.01l50.54,50.58c.38.38.89.59,1.43.6.52,0,1.03-.22,1.39-.6.78-.77.78-2.03.01-2.81,0,0,0,0-.01-.01l-50.58-50.58Z"
/>
<path
d="m324.05,328.61c-.78-.78-2.04-.78-2.82,0s-.78,2.04,0,2.82h0l50.58,50.54c.36.38.87.59,1.39.6.53,0,1.03-.21,1.39-.6.77-.72.81-1.93.09-2.7-.03-.03-.06-.06-.09-.09l-50.54-50.58Z"
/>
<path
d="m329.66,323.01c-.77-.78-2.03-.78-2.81-.01,0,0,0,0-.01.01-.76.77-.76,2.01,0,2.78l50.58,50.58c.38.38.89.59,1.43.6.52,0,1.02-.22,1.39-.6.76-.79.76-2.04,0-2.82l-50.58-50.54Z"
/>
</svg>
</button>
<button type="button" onclick="toggleMenu(3)" class="menuItem">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 537.01 537.01">
<path
d="m268.51,14c140.6.13,254.48,114.21,254.35,254.81-.09,102.15-61.23,194.35-155.29,234.19-129.7,54.27-278.83-6.88-333.1-136.58C-19.54,237.35,40.74,88.89,169.43,34c31.34-13.27,65.03-20.07,99.06-20m0-14C120.21,0,0,120.21,0,268.51s120.21,268.5,268.51,268.5,268.5-120.21,268.5-268.5S416.8,0,268.51,0h-.02Z"
/>
<path
d="m348.43,411.51c-2.85,0-5.68-.32-8.47-.93-52.94-10.95-101.71-36.63-140.69-74.07-38.16-37.53-64.62-85.31-76.19-137.56-2.77-13.24,1.56-26.98,11.43-36.23l33.86-32.59c3.5-3.31,8.24-4.97,13.04-4.57,4.98.52,9.47,3.22,12.27,7.36l42.33,62.56c3.26,4.98,2.88,11.51-.93,16.08l-21.25,25.4c8.46,18.73,20.45,35.66,35.3,49.86h0c14.76,14.72,32.2,26.47,51.38,34.62l26.33-20.91c4.53-3.58,10.8-3.98,15.75-1.02l63.91,41.31c8.03,4.79,10.65,15.19,5.86,23.22-.67,1.13-1.47,2.17-2.39,3.11l-33.02,32.68c-7.57,7.54-17.84,11.74-28.53,11.68ZM180.05,142.31l-33.86,32.59c-5.56,5.18-7.97,12.9-6.35,20.32,10.76,49.03,35.48,93.9,71.19,129.18,36.69,35.23,82.59,59.38,132.4,69.67,7.66,1.6,15.61-.75,21.16-6.26l33.02-32.68-61.71-39.87-28.27,22.52c-2.2,1.74-5.11,2.28-7.79,1.44-23.48-8.65-44.75-22.38-62.31-40.21h0c-18.16-16.95-32.25-37.79-41.23-60.95-.77-2.85,0-5.9,2.03-8.04l22.86-27.34-41.14-60.36Z"
/>
</svg>
</button>
</nav>
</section>
<div class="svgContainer">
<svg viewBox="0 0 202.9 45.5">
<clipPath
id="menu"
clipPathUnits="objectBoundingBox"
transform="scale(0.0049285362247413 0.021978021978022)"
>
<path
d="M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7
c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5
c9.2,3.6,17.6,4.2,23.3,4H6.7z"
/>
</clipPath>
</svg>
</div>
</body>
</html>Result Screenshot(s)
Author:Geekboots