Animated Responsive Navbar with CSS (DESIGN-2)
Dec 19, 2021
.webp)
Live Preview
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">
<link rel="stylesheet" href="style.css">
<title>Responsive Navbar Design | HTML, CSS & JAVASCRIPT </title>
<link href="https://fonts.googleapis.com/css?family=Psoppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
</head>
<body>
<header id="navbar">
<nav class="navbar-container container">
<a href="/" class="home-link">
<div class="navbar-logo"></div>
Atech Seva
</a>
<button type="button" id="navbar-toggle" aria-controls="navbar-menu" aria-label="Toggle menu"
aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="navbar-menu" aria-labelledby="navbar-toggle">
<ul class="navbar-links">
<li class="navbar-item"><a class="navbar-link" href="/about">About</a></li>
<li class="navbar-item"><a class="navbar-link" href="/blog">Blog</a></li>
<li class="navbar-item"><a class="navbar-link" href="/careers">Careers</a></li>
<li class="navbar-item"><a class="navbar-link" href="/contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
<script src="main.js"></script>
</body>
</html>style.css
:root {--navbar-bg-color: hsl(0, 0%, 15%);--navbar-text-color: hsl(0, 0%, 85%);--navbar-text-color-focus: white;--navbar-bg-contrast: hsl(0, 0%, 25%);}* {box-sizing: border-box;margin: 0;padding: 0;}body {height: 100vh;font-family: Arial, Helvetica, sans-serif;line-height: 1.6;}.container {max-width: 1000px;padding-left: 1.4rem;padding-right: 1.4rem;margin-left: auto;margin-right: auto;}#navbar {--navbar-height: 64px;position: fixed;height: var(--navbar-height);background-color: var(--navbar-bg-color);left: 0;right: 0;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);}.navbar-container {display: flex;justify-content: space-between;height: 100%;align-items: center;}.navbar-item {margin: 0.4em;width: 100%;}.home-link, .navbar-link {color: var(--navbar-text-color);text-decoration: none;display: flex;font-weight: 400;align-items: center;}.home-link:is(:focus, :hover) {color: var(--navbar-text-color-focus);}.navbar-link {justify-content: center;width: 100%;padding: 0.4em 0.8em;border-radius: 5px;}.navbar-link:is(:focus, :hover) {color: var(--navbar-text-color-focus);background-color: var(--navbar-bg-contrast);}.navbar-logo {background-color: var(--navbar-text-color-focus);border-radius: 50%;width: 30px;height: 30px;margin-right: 0.5em;}#navbar-toggle {cursor: pointer;border: none;background-color: transparent;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;flex-direction: column;}.icon-bar {display: block;width: 25px;height: 4px;margin: 2px;background-color: var(--navbar-text-color);}#navbar-toggle:is(:focus, :hover) .icon-bar {background-color: var(--navbar-text-color-focus);}#navbar-toggle[aria-expanded="true"] .icon-bar:is(:first-child, :last-child) {position: absolute;margin: 0;width: 30px;}#navbar-toggle[aria-expanded="true"] .icon-bar:first-child {transform: rotate(45deg);}#navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(2) {opacity: 0;}#navbar-toggle[aria-expanded="true"] .icon-bar:last-child {transform: rotate(-45deg);}#navbar-menu {position: fixed;top: var(--navbar-height);bottom: 0;opacity: 0;visibility: hidden;left: 0;right: 0;}#navbar-toggle[aria-expanded="true"]+#navbar-menu {background-color: rgba(0, 0, 0, 0.4);opacity: 1;visibility: visible;}.navbar-links {list-style: none;position: absolute;background-color: var(--navbar-bg-color);display: flex;flex-direction: column;align-items: center;left: 0;right: 0;margin: 1.4rem;border-radius: 5px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);}#navbar-toggle[aria-expanded="true"]+#navbar-menu .navbar-links {padding: 1em;}@media screen and (min-width: 700px) {#navbar-toggle, #navbar-toggle[aria-expanded="true"] {display: none;}#navbar-menu, #navbar-toggle[aria-expanded="true"] #navbar-menu {visibility: visible;opacity: 1;position: static;display: block;height: 100%;}.navbar-links, #navbar-toggle[aria-expanded="true"] #navbar-menu .navbar-links {margin: 0;padding: 0;box-shadow: none;position: static;flex-direction: row;width: 100%;height: 100%;}}main.js
const navbarToggle = navbar.querySelector("#navbar-toggle");
const navbarMenu = document.querySelector("#navbar-menu");
const navbarLinksContainer = navbarMenu.querySelector(".navbar-links");
let isNavbarExpanded = navbarToggle.getAttribute("aria-expanded") === "true";
const toggleNavbarVisibility = () => {
isNavbarExpanded = !isNavbarExpanded;
navbarToggle.setAttribute("aria-expanded", isNavbarExpanded);
};
navbarToggle.addEventListener("click", toggleNavbarVisibility);
navbarLinksContainer.addEventListener("click", (e) => e.stopPropagation());
navbarMenu.addEventListener("click", toggleNavbarVisibility);
Similar Navbar Design
https://www.atechseva.com/snippet/animated-responsive-navigation-html
https://www.atechseva.com/snippet/animated-responsive-nav-sidemenu-design