Magic Css Indicator Navigation Bar in HTML CSS & JavaScript

Magic CSS Indicator Navigation



Greetings, dear friend! I trust you're enjoying a splendid day. In the enthralling realm of web development, we delve into the intricate art of crafting an Animated Navigation with Indicator using HTML, CSS, and JavaScript. Our journey today takes us beyond the ordinary, into a universe of design elegance and dynamic animations.


Behold, the navigation menu - a fusion of links that guide visitors through the digital labyrinth. Online, we encounter a plethora of navigation menu bar, each a unique symphony of animations and features, adapting seamlessly to a kaleidoscope of screens, from the grandeur of desktops to the intimacy of mobile devices.


A fleeting glance at our brainchild, the [Animated Magic Css Indicator Navigation]  reveals a captivating spectacle. In our navigation bar, we unveil a quartet of navigation icons, standing sentinel over a singular enigmatic indicator, mapping the traveler's current location. Observe the primacy of the home section, basking in its active status, adorned with a resplendent circle indicator, embossed with text and color. The other four navigation icons, humbly residing in their dormant state, await their turn.


Intrigued? Delve into the virtual tapestry of our creation, the [Magic Css Indicator Navigation], Here, the very heartbeat of HTML, CSS, and JavaScript orchestrates a mesmerizing ballet of elements. As we navigate through the labyrinth of source code, a prelude is in order.


As our project's live demo unveils, an initial canvas boasts a singular navigation menu bar, adorned with four exquisite navigation icons. The 'primus inter Pares' - the first icon, gleams with vibrancy, sporting a luminous hue, a circular sentinel, and lyrical text. When the siren call of the second icon beckons, colors transform, text dances to the tune, and the indicator embarks on a graceful migration, bidding farewell to its former abode. Such is the symphony played out each time a click ignites a new voyage.


Notice the beguiling curvature of the indicator, a flourish that lends the navigation menu an extra layer of mystique. HTML and CSS collaborate in the construction of this navigational masterpiece, while JavaScript, like a maestro, orchestrates the movement and color metamorphosis.


Now, with newfound wisdom, I trust you are well-equipped to embark on your own odyssey, crafting the [Magic CSS Indicator Navigation], But should the endeavor prove an elusive quest, fear not, for I've thoughtfully provided the entire treasure trove of source code below, ready to guide you through the labyrinth.


In the grand tapestry of web development, this animated navigation menu stands as a testament to the artistry that lies within the HTML, CSS, and JavaScript trifecta. It beckons you to set sail on your own journey, a creator of digital wonder, I have provided all the source code below.


 Magic Css Indicator Navigation [Source Code]

To get the following HTML CSS and JavaScript code for an Animated Navigation Menu Bar with Beautiful Indicator. You need to create two files one is an HTML file, and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.
<!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> Magic CSS Indicator Navigation</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
</head>
<body>
  <nav class="navbar-container">
    <ul class="list">
      <div style="--position: 0;" data-indicator class="indicator">
        <div class="corners"></div>
      </div>
      <li><a href="#" class="active">
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/>
          </svg>
        </div>
        <div class="text">Home</div>
      </a></li>
      <li><a href="#">
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"/></svg>
        </div>
        <div class="text">Account</div>
      </a></li>
      <li><a href="#">
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>
        </div>
        <div class="text">Messages</div>
      </a></li>
      <li><a href="#">
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.12 4l1.83 2H20v12H4V6h4.05l1.83-2h4.24M15 2H9L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2zm-3 7c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z"/></svg>
        </div>
        <div class="text">Photos</div>
      </a></li>
      <li><a href="#">
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
        </div>
        <div class="text">Settings</div>
      </a></li>
    </ul>
  </nav>
</body>
</html>
*, *::before, *::after {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background-color: var(--background-color);
  color: white;
}

:root {
  --icon-size: 2rem;
  --indicator-spacing: calc(var(--icon-size) / 8);
  --border-radius: calc(var(--icon-size) / 4);
  --nav-item-padding: calc(var(--icon-size) / 2);
  --background-color: #f51c0c;
}

.navbar-container {
  background-color: white;
  border-radius: var(--border-radius);
  width: max-content;
  margin: 0 auto;
  margin-top: 10rem;
  padding: 0 calc(var(--nav-item-padding) * 1.5);
}

.list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list a {
  color: #333;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--nav-item-padding);
}

.list .text {
  font-size: .8em;
  opacity: 0;
  pointer-events: none;
  transition: 250ms ease-in-out;
  position: absolute;
  bottom: calc(.5 * var(--nav-item-padding));
  transform: translateY(50%);
}

.list .icon {
  position: relative;
  transition: 250ms ease-in-out;
}

.list .icon svg {
  fill: currentColor;
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
}

.list .active .text {
  pointer-events: all;
  opacity: 1;
  transform: translateY(0);
}

.list .active .icon {
  transform: translateY(calc(-50% - var(--nav-item-padding)));
}

/* .list .active::before {
  content: "";
  box-sizing: content-box;
  position: absolute;
  width: var(--border-radius);
  height: var(--border-radius);
  background-color: white;
  z-index: 1;
  top: calc(-1 * var(--indicator-spacing));
  left: calc(.2 * var(--indicator-spacing));
  transform: translateX(-100%);
  border-top-right-radius: 100%;
  border-width: calc(var(--indicator-spacing));
  border-color: var(--background-color);
  border-style: solid;
  border-bottom: none;
  border-left: none;
}

.list .active::after {
  content: "";
  box-sizing: content-box;
  position: absolute;
  width: var(--border-radius);
  height: var(--border-radius);
  background-color: white;
  z-index: 1;
  top: calc(-1 * var(--indicator-spacing));
  right: calc(.2 * var(--indicator-spacing));
  transform: translateX(100%);
  border-top-left-radius: 100%;
  border-width: calc(var(--indicator-spacing));
  border-color: var(--background-color);
  border-style: solid;
  border-bottom: none;
  border-right: none;
} */

.list {
  position: relative;
}

.indicator {
  position: absolute;
  left: calc(var(--position) * (var(--icon-size) + var(--nav-item-padding) * 2));
  transition: 250ms ease-in-out;
}

.indicator::after,
.indicator::before {
  content: "";
  position: absolute;
  border-radius: 100%;
}

.indicator::after {
  background-color: hsl(0, 100%, 50%);
  width: calc(var(--icon-size) * 2);
  height: calc(var(--icon-size) * 2);
  top: calc(-1 * var(--icon-size));
}
.indicator::before {
  background-color: var(--background-color);
  width: calc((var(--icon-size) + var(--indicator-spacing)) * 2);
  height: calc((var(--icon-size) + var(--indicator-spacing)) * 2);
  top: calc(-1 * var(--icon-size) - var(--indicator-spacing));
  left: calc(-1 * var(--indicator-spacing));
}

.corners::before {
  content: "";
  box-sizing: content-box;
  position: absolute;
  width: var(--border-radius);
  height: var(--border-radius);
  background-color: white;
  z-index: 1;
  top: calc(-1 * var(--indicator-spacing));
  left: calc(.2 * var(--indicator-spacing));
  transform: translateX(-100%);
  border-top-right-radius: 100%;
  border-width: calc(var(--indicator-spacing));
  border-color: var(--background-color);
  border-style: solid;
  border-bottom: none;
  border-left: none;
}

.corners::after {
  content: "";
  box-sizing: content-box;
  position: absolute;
  width: var(--border-radius);
  height: var(--border-radius);
  background-color: white;
  z-index: 1;
  top: calc(-1 * var(--indicator-spacing));
  left: calc(var(--icon-size) * 2 + -.2 * var(--indicator-spacing));
  border-top-left-radius: 100%;
  border-width: calc(var(--indicator-spacing));
  border-color: var(--background-color);
  border-style: solid;
  border-bottom: none;
  border-right: none;
}
const indicator = document.querySelector("[data-indicator]")

document.addEventListener("click", e => {
  let anchor
  if (e.target.matches("a")) {
    anchor = e.target
  } else {
    anchor = e.target.closest("a")
  }
  if (anchor != null) {
    const allAnchors = [...document.querySelectorAll("a")]
    const index = allAnchors.indexOf(anchor)
    indicator.style.setProperty("--position", index)
    document.querySelectorAll("a").forEach(elem => {
      elem.classList.remove("active")
    })
    anchor.classList.add("active")
  }
})


Magic Css Indicator Navigation Bar in HTML CSS & JavaScript

If you face any difficulties while creating your Navigation Bar or your code is not working as expected, you can download the source code files for this Navbar Menu for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.




  
Tags

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Our website uses cookies to improve your experience. Learn more