website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

animated-responsive-nav-menu-design

Animated Responsive Navbar with CSS (DESIGN-2)

  • 100
  • 28-Jan-2023
  • Codepen

  • Details

    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

Preview
whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat