Animated navbar 🤩

-


  DEMO WEBSITE 👉👉 https://sbkln8.csb.app/

FOLLOW MORE MORE

HTML:

We will start by creating the HTML structure for our navbar. In this example, we will create a simple navbar with three links.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Navbar</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <menu class="menu">
    
        <button class="menu__item active" style="--bgColorItem: #ff8c00;" >
          <svg class="icon" viewBox="0 0 24 24">
            <path d="M3.8,6.6h16.4"/>
            <path d="M20.2,12.1H3.8"/>
            <path d="M3.8,17.5h16.4"/>
          </svg>
        </button>
    
        <button class="menu__item" style="--bgColorItem: #f54888;">
          <svg class="icon" viewBox="0 0 24 24">
            <path  d="M6.7,4.8h10.7c0.3,0,0.6,0.2,0.7,0.5l2.8,7.3c0,0.1,0,0.2,0,0.3v5.6c0,0.4-0.4,0.8-0.8,0.8H3.8
            C3.4,19.3,3,19,3,18.5v-5.6c0-0.1,0-0.2,0.1-0.3L6,5.3C6.1,5,6.4,4.8,6.7,4.8z"/>
            <path  d="M3.4,12.9H8l1.6,2.8h4.9l1.5-2.8h4.6"/>
          </svg>
        </button>
    
        <button class="menu__item" style="--bgColorItem: #4343f5;" >
          <svg class="icon" viewBox="0 0 24 24">
          <path  d="M3.4,11.9l8.8,4.4l8.4-4.4"/>
          <path  d="M3.4,16.2l8.8,4.5l8.4-4.5"/>
          <path  d="M3.7,7.8l8.6-4.5l8,4.5l-8,4.3L3.7,7.8z"/>
        </button>
    
        <button class="menu__item" style="--bgColorItem: #e0b115;" > 
          <svg class="icon" viewBox="0 0 24 24" >
            <path  d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1
              C3.9,4.4,4.4,3.9,5.1,3.9z"/>
            <path  d="M4.2,9.3h15.6"/>
            <path  d="M9.1,9.5v10.3"/>
        </button>
    
        <button class="menu__item" style="--bgColorItem:#65ddb7;">
          <svg class="icon" viewBox="0 0 24 24" >
            <path  d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1
              C3.9,4.4,4.4,3.9,5.1,3.9z"/>
            <path  d="M5.5,20l9.9-9.9l4.7,4.7"/>
            <path  d="M10.4,8.8c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C7.3,8,8,7.3,8.9,7.3C9.7,7.3,10.4,8,10.4,8.8z"/>
          </svg>
        </button>
    
        <div class="menu__border"></div>
    
      </menu>
    
      <div class="svg-container">
        <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>
  <script src="script.js"></script>
</body>
</html>


CSS:

Next, we will style our navbar using CSS. We will add styles for the navbar, the links, and the hover effect.

css
html {
  box-sizing: border-box;
  --bgColorMenu: #1d1d27;
  --duration: 0.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, -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: 0.8em;
  }
}

JS:

Now, we will add JS to create an animated navbar. We will use the jQuery library to simplify the code.

javascript
"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");
});


A navbar is a crucial part of any website that provides users with easy navigation to different sections of a site. An animated navbar adds an engaging and interactive element to the website by using animations to enhance the user experience.

To create an animated navbar, we will need to use HTML, CSS, and JS. The HTML will define the structure of the navbar, while the CSS will style it and create the animations. The JS will handle the user interaction and trigger the animations.I

n this example, we set the navbar to have a fixed position at the top of the screen. We also added a CSS animation called "slideDown" that moves the navbar down from the top of the screen with a delay of half a second.

Conclusion:

An animated navbar adds an interactive and engaging element to any website. With HTML, CSS, and JS, we can create a navbar that is both functional and visually appealing. By adding animations to the navbar, we can create a more dynamic user experience that enhances the overall quality of the website.

An animated navbar, also known as a navigation bar or menu, is a common element on websites that uses animations to enhance the user experience. It provides easy navigation to different sections of a site while also adding a visually appealing and interactive element to the website.

The animated navbar can be created using HTML, CSS, and JS. HTML defines the structure of the navbar, while CSS styles it and creates the animations. JS handles user interaction and triggers the animations.

There are many ways to create an animated navbar, such as adding a hover effect, changing the background color when the user scrolls, or using CSS animations to create slide-in or fade-in effects. An animated navbar can add an engaging element to a website and improve its overall usability and user experience.

Comments

Post a Comment

Popular posts from this blog

Drag Papers Proposal 💕

-
Image
Drag Papers Proposal.   In this Blog i will show you how you can create this effect  DEMO LINK for PC  ðŸ‘‰ðŸ‘‰ðŸ‘‰  Drag paper proposal (codepen.io)                          DEMO LINK for mobile  ðŸ‘‰ðŸ‘‰ðŸ‘‰  https://g196k8.csb.app/   first you have to create an html files as below : index.html : <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Drag Papers </title> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Short+Stack&amp;family=Homemade+Apple&amp;display=swap'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <!-- A pen by Developer Rahul --> <div class="paper heart"> </div> <div class="paper image"> <p> and I fallen in</p> <p>Love with You </p> ...
Read more

Galaxy Proposal😻😻

-
Image
  Demo link 👉👉  Space galaxy Follow Developer Saro for more index.html <! DOCTYPE html > < html lang =" en "> < head > < meta charset =" UTF-8 " /> < meta http-equiv =" X-UA-Compatible " content =" IE=edge " /> < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " /> < title > Space galaxy </ title > < link rel =" stylesheet " href =" style.css " /> < link href =" https://fonts.googleapis.com/css?family=Pacifico " rel =" stylesheet " /> < script src =" https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.min.js "> < / script > < script src =" https://cdn.jsdelivr.net/npm/three@0.121.1/examples/js/controls/OrbitControls.js "> < / script > < script src =" https://cdnjs.cloudflare.com/ajax/li...
Read more

Music Player - 3D

-
Image
                               DEMO LINK 👉👉  https://ub6tk8.csb.app/                 Follow for more   index.html <! DOCTYPE html > < html lang =" en "> < head > < meta charset =" UTF-8 " /> < meta http-equiv =" X-UA-Compatible " content =" IE=edge " /> < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " /> < title > Document </ title > < link rel =" stylesheet " href =" style.css " /> </ head > < body > <!-- a code by saravanan --> < audio id =" a "> < source src =" superman.mp3 " type =" audio/mpeg "/> </ audio > < div class =" main flex " id =" h "> < div class =" shadows "> < div class =" shadow shado...
Read more