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

Need an Eye-caching Website - Contact Me Today !

responsive-navigation-bar-with-darkmode-in-html-css-javascript

Responsive Navigation With Light/Dark Mode & Search Bar

  • 126
  • 24-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">
        <!-- ===== CSS ===== -->
        <link rel="stylesheet" href="style.css">
        <!-- ===== Boxicons CSS ===== -->
        <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
        <title>Responsive Navigation Menu Bar</title>
    </head>
    <body>
        <nav>
            <div class="nav-bar">
                <i class='bx bx-menu sidebarOpen' ></i>
                <span class="logo navLogo"><a href="#">Atechseva</a></span>
    
                <div class="menu">
                    <div class="logo-toggle">
                        <span class="logo"><a href="#">Atechseva</a></span>
                        <i class='bx bx-x siderbarClose'></i>
                    </div>
    
                    <ul class="nav-links">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
    
                <div class="darkLight-searchBox">
                    <div class="dark-light">
                        <i class='bx bx-moon moon'></i>
                        <i class='bx bx-sun sun'></i>
                    </div>
    
                    <div class="searchBox">
                       <div class="searchToggle">
                        <i class='bx bx-x cancel'></i>
                        <i class='bx bx-search search'></i>
                       </div>
    
                        <div class="search-field">
                            <input type="text" placeholder="Search...">
                            <i class='bx bx-search'></i>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    
        <script src="script.js"></script>
    
    </body>
    </html>

    style.css

     @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;transition: all 0.4s ease;;}:root {--body-color: #E4E9F7;--nav-color: #3142ae;--side-nav: #010718;--text-color: #FFF;--search-bar: #F2F2F2;--search-text: #010718;}body {height: 100vh;background-color: var(--body-color);}body.dark {--body-color: #18191A;--nav-color: #242526;--side-nav: #242526;--text-color: #CCC;--search-bar: #242526;}nav {position: fixed;top: 0;left: 0;height: 70px;width: 100%;background-color: var(--nav-color);z-index: 100;}body.dark nav {border: 1px solid #393838;}nav .nav-bar {position: relative;height: 100%;max-width: 1000px;width: 100%;background-color: var(--nav-color);margin: 0 auto;padding: 0 30px;display: flex;align-items: center;justify-content: space-between;}nav .nav-bar .sidebarOpen {color: var(--text-color);font-size: 25px;padding: 5px;cursor: pointer;display: none;}nav .nav-bar .logo a {font-size: 25px;font-weight: 500;color: var(--text-color);text-decoration: none;}.menu .logo-toggle {display: none;}.nav-bar .nav-links {display: flex;align-items: center;}.nav-bar .nav-links li {margin: 0 5px;list-style: none;}.nav-links li a {position: relative;font-size: 17px;font-weight: 400;color: var(--text-color);text-decoration: none;padding: 10px;}.nav-links li a::before {content: '';position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);height: 6px;width: 6px;border-radius: 50%;background-color: var(--text-color);opacity: 0;transition: all 0.3s ease;}.nav-links li:hover a::before {opacity: 1;}.nav-bar .darkLight-searchBox {display: flex;align-items: center;}.darkLight-searchBox .dark-light, .darkLight-searchBox .searchToggle {height: 40px;width: 40px;display: flex;align-items: center;justify-content: center;margin: 0 5px;}.dark-light i, .searchToggle i {position: absolute;color: var(--text-color);font-size: 22px;cursor: pointer;transition: all 0.3s ease;}.dark-light i.sun {opacity: 0;pointer-events: none;}.dark-light.active i.sun {opacity: 1;pointer-events: auto;}.dark-light.active i.moon {opacity: 0;pointer-events: none;}.searchToggle i.cancel {opacity: 0;pointer-events: none;}.searchToggle.active i.cancel {opacity: 1;pointer-events: auto;}.searchToggle.active i.search {opacity: 0;pointer-events: none;}.searchBox {position: relative;}.searchBox .search-field {position: absolute;bottom: -85px;right: 5px;height: 50px;width: 300px;display: flex;align-items: center;background-color: var(--nav-color);padding: 3px;border-radius: 6px;box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);opacity: 0;pointer-events: none;transition: all 0.3s ease;}.searchToggle.active~.search-field {bottom: -74px;opacity: 1;pointer-events: auto;}.search-field::before {content: '';position: absolute;right: 14px;top: -4px;height: 12px;width: 12px;background-color: var(--nav-color);transform: rotate(-45deg);z-index: -1;}.search-field input {height: 100%;width: 100%;padding: 0 45px 0 15px;outline: none;border: none;border-radius: 4px;font-size: 14px;font-weight: 400;color: var(--search-text);background-color: var(--search-bar);}body.dark .search-field input {color: var(--text-color);}.search-field i {position: absolute;color: var(--nav-color);right: 15px;font-size: 22px;cursor: pointer;}body.dark .search-field i {color: var(--text-color);}@media (max-width: 790px) {nav .nav-bar .sidebarOpen {display: block;}.menu {position: fixed;height: 100%;width: 320px;left: -100%;top: 0;padding: 20px;background-color: var(--side-nav);z-index: 100;transition: all 0.4s ease;}nav.active .menu {left: -0%;}nav.active .nav-bar .navLogo a {opacity: 0;transition: all 0.3s ease;}.menu .logo-toggle {display: block;width: 100%;display: flex;align-items: center;justify-content: space-between;}.logo-toggle .siderbarClose {color: var(--text-color);font-size: 24px;cursor: pointer;}.nav-bar .nav-links {flex-direction: column;padding-top: 30px;}.nav-links li a {display: block;margin-top: 20px;}}

    script.js

    const body = document.querySelector("body"),
      nav = document.querySelector("nav"),
      modeToggle = document.querySelector(".dark-light"),
      searchToggle = document.querySelector(".searchToggle"),
      sidebarOpen = document.querySelector(".sidebarOpen"),
      siderbarClose = document.querySelector(".siderbarClose");
    
    let getMode = localStorage.getItem("mode");
    if (getMode && getMode === "dark-mode") {
      body.classList.add("dark");
    }
    
    // js code to toggle dark and light mode
    modeToggle.addEventListener("click", () => {
      modeToggle.classList.toggle("active");
      body.classList.toggle("dark");
    
      // js code to keep user selected mode even page refresh or file reopen
      if (!body.classList.contains("dark")) {
        localStorage.setItem("mode", "light-mode");
      } else {
        localStorage.setItem("mode", "dark-mode");
      }
    });
    
    // js code to toggle search box
    searchToggle.addEventListener("click", () => {
      searchToggle.classList.toggle("active");
    });
    
    
    //   js code to toggle sidebar
    sidebarOpen.addEventListener("click", () => {
      nav.classList.add("active");
    });
    
    body.addEventListener("click", e => {
      let clickedElm = e.target;
    
      if (!clickedElm.classList.contains("sidebarOpen") && !clickedElm.classList.contains("menu")) {
        nav.classList.remove("active");
      }
    });

Preview
whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat