layakCoder
layakCoder
Animated Navbar HTML CSS

Animated Navbar

Table of Contents

Introduction of Animated Navbar HTML CSS

Hello everyone, good to see you again. Here we are creating an amazing Animated Navbar HTML CSS of the parallax method in HTML. This project is made with the help of HTML, CSS, and JavaScript by following a simple and easy concept step by step to provide you with a better understanding of the project. In this project, there will be a navbar in a black background with navbar tools like Shopping, Discover, Cart, Bookmark and Profile. When the user hovers over any particular tool. The icon of that tool will animate, and when you click on that tool. The navbar will bend right or left according to the direction of the click.

Now we will make it with the help of HTML (Hyper Text Markup Language), CSS ( Cascading Stylesheet), and JavaScript. The code will not be very complicated; you just have to follow us step by step to get a proper understanding. If you’ll have any doubt, then you can contact us through the contact details given in the footer of the page. 

HTML (Hypertext Markup Language)

First, we will make the structure of that Animated Navbar HTML CSS with the help of HTML (the Hyper Text Markup Language is used to make the structure of the web page). In this project, we are going to use the parallax method to make the animation of icons much better and attach the link to Google Fonts (which you can copy from our code). We will make a parent div. In which there will be two divs for cards, and then another parent div in the main parent div. Where the link to those icons will be embedded by making a list in which there will be the icons and links in the anchor tag (which is used to attach the link to an external file).

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Animated Icon Nav</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans&amp;display=swap'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="app">
	<div class="cards">
		<div class="card" data-card></div>
		<div class="card" data-card></div>
	</div>
	<nav class="nav" data-nav>
		<ul class="nav__items">
			<li class="nav__item">
				<a href="#" class="nav__item-btn" data-nav-item="1" aria-describedby="current">
					<svg class="nav__item-icon" width="24px" height="24px" viewBox="0 0 24 24">
						<g class="icon1-1">
							<path fill="currentColor" d="M23.1,20.4H0.8c-0.4,0-0.7-0.2-0.8-0.6s0-0.8,0.3-1l11.5-8.1c0.3-0.2,0.7-0.2,1,0l10.8,8.1
														 c0.3,0.2,0.4,0.6,0.3,1C23.8,20.1,23.5,20.4,23.1,20.4z M4.8,18.6h14.4c0.7,0,0.8-0.3,0.3-0.8l-6.2-4.6c-0.6-0.4-1.5-0.4-2.1,0
														 l-6.6,4.7C4,18.3,4.1,18.6,4.8,18.6z"/>
							<path d="M9.5,6c0.1-3.3,4.9-3.3,5,0C14.4,9.3,9.6,9.3,9.5,6L9.5,6z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="11 4.7"/>
						</g>
					</svg>
					<span class="nav__item-text">Shop</span>
				</a>
			</li>
			<li class="nav__item">
				<a href="#" class="nav__item-btn" data-nav-item="2">
					<svg class="nav__item-icon" width="24px" height="24px" viewBox="0 0 24 24">
						<g fill="none" stroke="currentColor" stroke-width="2">
							<rect class="icon2-1" x="1" y="1" rx="3" ry="3" width="9" height="9" />
							<rect class="icon2-2" x="14" y="1" rx="3" ry="3" width="9" height="9" />
							<rect class="icon2-3" x="1" y="14" rx="3" ry="3" width="9" height="9" />
							<rect class="icon2-4" x="14" y="14" rx="3" ry="3" width="9" height="9" />
						</g>
					</svg>
					<span class="nav__item-text">Discover</span>
				</a>
			</li>
			<li class="nav__item">
				<a href="#" class="nav__item-btn" data-nav-item="3">
					<svg class="nav__item-icon" width="24px" height="24px" viewBox="0 0 24 24">
						<g class="icon3-1" fill="currentColor">
							<path d="M19.3,0H4.7C4.1,0,3.6,0.5,3.6,1.1v21.8c0,0.4,0.2,0.8,0.6,1c0.4,0.2,0.8,0.1,1.2-0.1l6.6-5.3l6.6,5.3c0.2,0.2,0.4,0.2,0.7,0.2c0.2,0,0.3,0,0.5-0.1c0.4-0.2,0.6-0.6,0.6-1V1.1C20.4,0.5,19.9,0,19.3,0z M18.2,20.6l-5.5-4.4C12.5,16.1,12.2,16,12,16s-0.5,0.1-0.7,0.2l-5.5,4.4V2.2h12.4V20.6z"/>
						</g>
					</svg>
					<span class="nav__item-text">Bookmark</span>
				</a>
			</li>
			<li class="nav__item">
				<a href="#" class="nav__item-btn" data-nav-item="4">
					<svg class="nav__item-icon" width="24px" height="24px" viewBox="0 0 24 24">
						<g fill="none" stroke="currentColor" stroke-width="2">
							<rect class="icon4-1" fill="currentColor" stroke-width="0" x="2.75" y="7.5" width="18.5" height="0"/>
							<rect class="icon4-2" x="2.5" y="7" rx="3" ry="3" width="19" height="16" />
							<path d="M7.5,10V5.5C7.5,3,9.5,1,12,1h0c2.5,0,4.5,2,4.5,4.5V10" stroke-linecap="round"/>
							<path class="icon4-3" d="M7.5,10V5.5C7.5,3,9.5,1,12,1h0c2.5,0,4.5,2,4.5,4.5V10" stroke-linecap="round"/>
						</g>
					</svg>
					<span class="nav__item-text">Cart</span>
				</a>
			</li>
			<li class="nav__item">
				<a href="#" class="nav__item-btn" data-nav-item="5">
					<svg class="nav__item-icon" width="24px" height="24px" viewBox="0 0 24 24">
						<g fill="none" stroke="currentColor" stroke-width="2">
							<g class="icon5-1">
								<circle cx="12" cy="6.5" r="5.5"/>
							</g>
							<path d="M3,23c0-3.4,4-6,9-6s9,2.6,9,6" stroke-linecap="round"/>
						</g>
					</svg>
					<span class="nav__item-text">Profile</span>
				</a>
			</li>
		</ul>
		<div id="current" hidden>Current page</div>
	</nav>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

CSS (Cascading Stylesheet)

After making the structure of that Animated Navbar HTML CSS. We will apply the style using CSS (Cascading StyleSheet is used to implement the styling in a web page. Also to make the web page responsive for other devices). In this, we will make the background black and place the parent div of navbar tools in the center of the screen. Then we will move toward the main content of the project.

In this, we will take all the tools of navbar in row using the flex property in the parent div. Then we will also give the background color and background border to the parent div. Now we will give the size and position of icons in a parent div. Will also give the color to the icons.

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --fg: #17181c;
  --primary: #0f0f0f;
  --primary-hover: #d80000;
  --secondary: #000000;
  --trans-dur: 0.3s;
  --trans-timing: cubic-bezier(0.7,0,0.3,1);
  font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}

body,
nav a {
  color: var(--fg);
  transition: background-color var(--trans-dur), color var(--trans-dur);
}

body {
  background-image: linear-gradient(45deg, var(--primary), var(--secondary));
  font: 1em/1.5 "DM Sans", sans-serif;
  height: 100vh;
  min-height: 24em;
}

.app,
.card,
.nav {
  padding: 0.75em;
  transition: background-color var(--trans-dur), box-shadow var(--trans-dur);
  width: 100%;
}

.app,
.card {
  background-color: rgba(255, 255, 255, 0.1);
}

.app {
  border-radius: 0 0 1.75em 1.75em;
  box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: auto;
  max-width: 20em;
  height: 22em;
  perspective: 20em;
  position: relative;
  top: -2em;
}

.cards {
  padding: 0 0.5em;
}

.card {
  border-radius: 1.25em;
  min-height: 6em;
  margin-bottom: 0.75em;
  opacity: 0;
}
.card--fly-out {
  animation: fadeInFlyOut 1s var(--trans-timing) forwards;
}
.card--fly-out:nth-child(1) {
  animation-delay: 0s;
}
.card--fly-out:nth-child(2) {
  animation-delay: 0.05s;
}

.icon1-1 {
  transform-origin: 12px 6px;
}

.icon3-1 {
  transform-origin: 12px 1px;
}

.icon4-3 {
  transform-origin: 12px 10px;
}

.icon5-1 {
  transform-origin: 12px 20px;
}

.nav {
  background-color: #e3e4e8;
  border-radius: 1em;
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.3);
  transform-origin: 50% 133%;
}
.nav--tilt1 {
  animation: tilt1 0.6s ease-in-out;
}
.nav--tilt2 {
  animation: tilt2 0.6s ease-in-out;
}
.nav--tilt3 {
  animation: tilt3 0.6s ease-in-out;
}
.nav--tilt4 {
  animation: tilt4 0.6s ease-in-out;
}
.nav--tilt5 {
  animation: tilt5 0.6s ease-in-out;
}
.nav__items {
  display: flex;
  justify-content: space-between;
  list-style: none;
}
.nav__item-btn {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  width: 3em;
  height: 3em;
  text-decoration: none;
}
.nav__item-btn:focus, .nav__item-btn:hover, .nav__item-btn[aria-describedby=current] {
  color: var(--primary-hover);
}
.nav__item-btn:focus {
  outline: transparent;
}
.nav__item-icon {
  display: block;
  margin: 0 auto;
  overflow: visible;
  width: 1.5em;
  height: 1.5em;
  transition: transform var(--trans-dur) var(--trans-timing);
}
.nav__item-icon g,
.nav__item-icon path,
.nav__item-icon rect {
  animation-duration: calc(var(--trans-dur) * 3);
  animation-timing-function: var(--trans-timing);
}
.nav__item-text {
  display: block;
  font-size: 0.6em;
  line-height: 1.25;
  opacity: 0;
  text-align: center;
  transition: opacity var(--trans-dur) var(--trans-timing);
}
.nav__item-btn:focus .nav__item-icon, .nav__item-btn:hover .nav__item-icon {
  transform: translateY(-0.5em);
}
.nav__item-btn:focus .nav__item-text, .nav__item-btn:hover .nav__item-text {
  animation: fadeFlyIn calc(var(--trans-dur) * 1.5) var(--trans-timing);
  opacity: 1;
}
.nav__item-btn:focus .icon1-1, .nav__item-btn:hover .icon1-1 {
  animation-name: icon1-1;
}
.nav__item-btn:focus .icon2-1, .nav__item-btn:hover .icon2-1 {
  animation-name: icon2-1;
}
.nav__item-btn:focus .icon2-2, .nav__item-btn:hover .icon2-2 {
  animation-name: icon2-2;
}
.nav__item-btn:focus .icon2-3, .nav__item-btn:hover .icon2-3 {
  animation-name: icon2-3;
}
.nav__item-btn:focus .icon2-4, .nav__item-btn:hover .icon2-4 {
  animation-name: icon2-4;
}
.nav__item-btn:focus .icon3-1, .nav__item-btn:hover .icon3-1 {
  animation-name: icon3-1;
}
.nav__item-btn:focus .icon4-1, .nav__item-btn:hover .icon4-1 {
  animation-name: icon4-1;
}
.nav__item-btn:focus .icon4-2, .nav__item-btn:hover .icon4-2 {
  animation-name: icon4-2;
}
.nav__item-btn:focus .icon4-3, .nav__item-btn:hover .icon4-3 {
  animation-name: icon4-3;
}
.nav__item-btn:focus .icon5-1, .nav__item-btn:hover .icon5-1 {
  animation-name: icon5-1;
}

/* `:focus-visible` support */
@supports selector(:focus-visible) {
  .nav__item-btn:focus {
    color: currentColor;
  }
  .nav__item-btn:focus-visible, .nav__item-btn:hover, .nav__item-btn[aria-describedby=current] {
    color: var(--primary-hover);
  }
  .nav__item-btn:focus .nav__item-icon {
    transform: translateY(0);
  }
  .nav__item-btn:focus .nav__item-text {
    opacity: 0;
  }
  .nav__item-btn:focus-visible .nav__item-icon, .nav__item-btn:hover .nav__item-icon {
    transform: translateY(-0.5em);
  }
  .nav__item-btn:focus-visible .nav__item-text, .nav__item-btn:hover .nav__item-text {
    opacity: 1;
  }
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e3e4e8;
    --primary-hover: #5583f6;
  }

  .app,
.card {
    background-color: rgba(0, 0, 0, 0.2);
  }

  .app {
    box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
  }

  .nav {
    background-color: #17181c;
  }
}
/* Animations */
@keyframes fadeFlyIn {
  from, 33.3% {
    opacity: 0;
    transform: translateY(0.5em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInFlyOut {
  from {
    opacity: 0;
    transform: translateY(0) scale(0.9);
  }
  35% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 1;
    transform: translateY(-250%) scale(1);
  }
}
@keyframes icon1-1 {
  from, to {
    transform: rotate(0);
  }
  33% {
    transform: rotate(30deg);
  }
  67% {
    transform: rotate(-30deg);
  }
}
@keyframes icon2-1 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(13px, 0);
  }
}
@keyframes icon2-2 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, 13px);
  }
}
@keyframes icon2-3 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, -13px);
  }
}
@keyframes icon2-4 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-13px, 0);
  }
}
@keyframes icon3-1 {
  from, to {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(-135deg);
  }
}
@keyframes icon4-1 {
  from, to {
    height: 0;
    transform: translateY(0);
  }
  50% {
    height: 5px;
    transform: translateY(-2px);
  }
}
@keyframes icon4-2 {
  from, to {
    height: 16px;
    transform: translateY(0);
  }
  50% {
    height: 15px;
    transform: translateY(-2px);
  }
}
@keyframes icon4-3 {
  from, to {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(-130deg);
  }
}
@keyframes icon5-1 {
  from, to {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-30deg);
  }
}
@keyframes tilt1 {
  from, to {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(-4deg);
  }
}
@keyframes tilt2 {
  from, to {
    transform: rotateX(0) rotateY(0);
  }
  50% {
    transform: rotateX(-3deg) rotateY(-3deg);
  }
}
@keyframes tilt3 {
  from, to {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(8deg);
  }
}
@keyframes tilt4 {
  from, to {
    transform: rotateX(0) rotateY(0);
  }
  50% {
    transform: rotateX(-3deg) rotateY(3deg);
  }
}
@keyframes tilt5 {
  from, to {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(4deg);
  }
}

JavaScript

We have made the whole structure of the Animated Navbar HTML CSS with design. Now we will apply logic to it for the hovering effect with the help of JavaScript. In this, we will target the HTML tags. Write the javascript functions so that when the user hovers over a particular icon. The icon will show animation with the name of that icon. The background of navbars will also move while clicking on the icon in different directions, as you can see.

window.addEventListener("DOMContentLoaded",() => {
	const app = new App(".app");
});

class App {
	constructor(qs) {
		this.el = document.querySelector(qs);
		this.page = 1;

		this.el?.addEventListener("click",this.viewPage.bind(this));
	}
	setPage(number) {
		const nav = document.querySelector("[data-nav]");

		nav?.classList.remove(`nav--tilt${this.page}`);
		this.page = number;
		nav?.classList.add(`nav--tilt${this.page}`);
	}
	viewPage(e) {
		e.preventDefault();
		// bubble up to the button
		let parent = e.target;

		while (parent && !parent.hasAttribute("data-nav-item"))
			parent = parent.parentElement;

		if (parent) {
			// set the page number
			const pageNumber = +parent.getAttribute("data-nav-item");

			if (pageNumber !== this.page) {
				this.setPage(pageNumber);

				// move the active state to the clicked item
				const items = document.querySelectorAll("[data-nav-item]");

				Array.from(items).forEach(item => {
					item.removeAttribute("aria-describedby");
				});	

				parent.setAttribute("aria-describedby","current");

				// run the card animation
				this.spawnCards();
			}
		}
	}
	spawnCards() {
		const flyOut = "card--fly-out";
		const cards = document.querySelectorAll("[data-card]");

		Array.from(cards).forEach(card => {
			card.classList.remove(flyOut);
			void card.offsetWidth;
			card.classList.add(flyOut);
		});
	}
}

Output of Animated Navbar HTML CSS

Finally, we made the whole Animated Navbar HTML CSS by using the simple and easy code of HTML, CSS, and JavaScript. This is a very useful project for you. As you can use it on your website to show your navigation tools with an awesome look. If you want the source code, then click on the link given below to download it.

Animated Navbar HTML CSS

For more explanation, click on the link given below to watch the video.

You can also check:

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow Us

Instagram Pinterest Facebook X-twitter

Latest Posts

Hover animated login form using HTML ,CSS and JavaScript

Login Form Cursor Effect

card slider tailwind

Card Slider with Tailwind CSS

Slider Effect Portfolio

Portfolio

navbar with some animation using HTML And CSS

Navbar

card css hover effect

Create Stunning Card CSS Hover Effect

Tailwind Gallery Grid Layout

Build a Tailwind Gallery Grid Layout with a Full-Screen Preview

Quick Links

Create Under Maintenance Page HTML

2+ Dynamic Star Rating Animation CSS for Engaging User Reviews

3+ Simple Steps to Build an Animated Website Navigation Bar

Master HTML CSS Button Animation for Design

Profile Card Layout Tailwind: Interactive Cards with Hover Effects

Top 3 Creative CSS Loader Designs: Flipping, Blur, Up-Down

Build a Tailwind Gallery Grid Layout with a Full-Screen Preview

Build the Ultimate CSS Animated Carousel Effect for Your Site

Top 5 Interactive HTML Hover Card Designs with Hover Animations

Top 4 HTML CSS Animated Text Effects: Glowing, Typing, Reveal

Hi there! I’m skilled in making websites, handling college projects, and creating graphics and written content. I’m here to help you out with any of these tasks. Let’s work together to make your ideas happen! If you have any questions feel free to email us at codenoobz6@gmail.com to get started.
Thank you for visiting LayakCoder.com

Our Info. Range

Contact us

Instagram Youtube Facebook X-twitter Pinterest