Navigation Menu with Search Bar

Introduction

A responsive navigation menu with search bar is a type of menu that includes a search bar component. It is commonly used on websites that have a large amount of content, as it allows users to easily search for specific pages or content within the website.

Creating a responsive navigation menu with search bar typically involves using HTML, CSS, and JavaScript. HTML is used to create the structure of the menu and search bar, CSS is used to style the menu and make it responsive, and JavaScript is used to add functionality to the search bar, such as searching and filtering results.

The HTML structure of a responsive navigation menu with search bar typically includes a list of menu items and a search bar component. The search bar is usually positioned on the right-hand side of the menu and is designed to be easily accessible to users. For example:

HTML Code

<header class="header" id="header">
   <nav class="navbar container">
      <a href="./index.html" class="brand">azcodinghub</a>
      <div class="burger" id="burger">
         <span class="burger-line"></span>
         <span class="burger-line"></span>
         <span class="burger-line"></span>
      </div>
      <span class="overlay"></span>
      <div class="menu" id="menu">
         <ul class="menu-inner">
            <li class="menu-item"><a class="menu-link" href="#">Home</a></li>
            <li class="menu-item"><a class="menu-link" href="#">About</a></li>
            <li class="menu-item"><a class="menu-link" href="#">Service</a></li>
            <li class="menu-item"><a class="menu-link" href="#">Project</a></li>
            <li class="menu-item"><a class="menu-link" href="#">Support</a></li>
         </ul>
      </div>
      <span><i class="bx bx-search search-toggle"></i></span>
      <div class="search-block">
         <form class="search-form">
            <span><i class="bx bx-arrow-back search-cancel"></i></span>
            <input type="search" name="search" class="search-input" placeholder="Search here...">
         </form>
      </div>
   </nav>
</header>

HTML Output

This the Output of the HTML

After you write the CSS code to Style the Website. To link the CSS file you add the below code between the head

 <link rel="stylesheet" href="style.css">

CSS Code

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap");

:root {
   --color-black: hsl(0, 0%, 10%);
   --color-darks: hsl(0, 0%, 25%);
   --color-greys: hsl(0, 0%, 60%);
   --color-light: hsl(0, 0%, 95%);
   --color-white: hsl(0, 0%, 100%);

   --color-blue-100: hsl(217, 91%, 60%);
   --color-blue-200: hsl(221, 83%, 53%);
   --color-blue-300: hsl(224, 76%, 48%);

   --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
      0 1px 2px 0 rgba(0, 0, 0, 0.06);
   --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

*,
*::before,
*::after {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   list-style: none;
   list-style-type: none;
   text-decoration: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
}

html {
   font-size: 100%;
   box-sizing: inherit;
   scroll-behavior: smooth;
   height: -webkit-fill-available;
}

body {
   font-family: "Rubik", ui-sans-serif, system-ui, -apple-system, sans-serif;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   height: -webkit-fill-available;
   color: var(--color-black);
   background-color: var(--color-white);
}

main {
   overflow: hidden;
}

a,
button {
   cursor: pointer;
   border: none;
   outline: none;
   background: none;
   text-transform: unset;
   text-decoration: none;
}

img,
video {
   display: block;
   max-width: 100%;
   height: auto;
   object-fit: cover;
}

img {
   image-rendering: -webkit-optimize-contrast;
   image-rendering: -moz-crisp-edges;
   image-rendering: crisp-edges;
}

// Elements
.section {
   margin: 0 auto;
   padding: 6rem 0 1rem;
}

.container {
   max-width: 75rem;
   height: auto;
   margin: 0 auto;
   padding: 0 1.25rem;
}

.brand {
   font-family: inherit;
   font-size: 1.5rem;
   font-weight: 600;
   line-height: 1.5;
   letter-spacing: -1px;
   text-transform: uppercase;
   color: var(--color-blue-100);
}

// Header
.header {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: auto;
   z-index: 10;
   margin: 0 auto;
   background-color: var(--color-white);
   box-shadow: var(--shadow-medium);
}

.navbar {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   height: 4rem;
   margin: 0 auto;
}

.menu {
   position: fixed;
   top: 0;
   left: -100%;
   width: 80%;
   height: 100%;
   z-index: 10;
   overflow-y: auto;
   background-color: var(--color-white);
   box-shadow: var(--shadow-medium);
   transition: all 0.5s ease-in-out;

   &.is-active {
      top: 0;
      left: 0;
   }

   &-inner {
      display: flex;
      flex-direction: column;
      row-gap: 1.25rem;
      margin: 1.25rem;
   }

   &-link {
      font-family: inherit;
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.5;
      text-transform: uppercase;
      color: var(--color-black);
      transition: all 0.3s ease;

      &:hover {
         color: var(--color-blue-200);
      }
   }

   // Media Query Breakpoint
   @media only screen and (min-width: 48rem) {
      position: relative;
      top: 0;
      left: 0;
      width: auto;
      height: auto;
      margin-left: auto;
      background: none;
      box-shadow: none;

      &-inner {
         display: flex;
         flex-direction: row;
         column-gap: 1.75rem;
         margin: 0 auto;
         margin-right: 5rem;
      }

      &-link {
         text-transform: capitalize;
      }

      &-block {
         margin-left: 2rem;
      }
   }
}

// Burger
.burger {
   position: relative;
   display: block;
   cursor: pointer;
   order: -1;
   width: 1.75rem;
   height: auto;
   border: none;
   outline: none;
   visibility: visible;

   &-line {
      display: block;
      cursor: pointer;
      width: 100%;
      height: 2px;
      margin: 6px auto;
      transform: rotate(0deg);
      background-color: var(--color-black);
      transition: all 0.3s ease-in-out;
   }

   // Media Query Breakpoint
   @media only screen and (min-width: 48rem) {
      display: none;
      visibility: hidden;
   }
}

// Overlay
.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 9;
   opacity: 0;
   visibility: hidden;
   background-color: rgba(0, 0, 0, 0.6);
   transition: all 0.3s ease-in-out;

   &.is-active {
      display: block;
      opacity: 1;
      visibility: visible;
   }
}

// Search Bar
.search {
   &-toggle,
   &-cancel {
      display: block;
      cursor: pointer;
      font-size: 1.35rem;
      line-height: inherit;
      color: var(--color-black);
   }

   &-block {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      z-index: 10;
      overflow: hidden;
      background-color: var(--color-white);
      transition: all 0.45s ease-in-out;

      &.is-active {
         top: 0;
         right: 0;
      }

      // @media only screen and (min-width: ) {

      // }
   }

   &-form {
      display: flex;
      align-items: center;
      column-gap: 0.75rem;
      padding: 0.75rem 1rem;
   }

   &-input {
      display: block;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      width: 100%;
      height: auto;
      padding: 0.65rem 1.25rem;
      border: none;
      outline: none;
      border-radius: 0.25rem;
      color: var(--color-black);
      background-color: var(--color-light);

      &::-webkit-search-decoration,
      &::-webkit-search-cancel-button {
         display: none;
         visibility: hidden;
      }
   }
}

CSS Output

This the Output of the after adding the CSS code

now you finally finished the styling the website. but menu not opening also search not working. To work the menu toggle button and search button you add a Javascript.

to connect the Js to the html the below code is add above the </body>

<script src="Script.js"></script>

JavaScript Code

// Open and Close Navbar Menu
const navbarMenu = document.getElementById("menu");
const burgerMenu = document.getElementById("burger");
const bgOverlay = document.querySelector(".overlay");

if (burgerMenu && bgOverlay) {
   burgerMenu.addEventListener("click", () => {
      navbarMenu.classList.add("is-active");
      bgOverlay.classList.toggle("is-active");
   });

   bgOverlay.addEventListener("click", () => {
      navbarMenu.classList.remove("is-active");
      bgOverlay.classList.toggle("is-active");
   });
}

// Close Navbar Menu on Links Click
document.querySelectorAll(".menu-link").forEach((link) => {
   link.addEventListener("click", () => {
      navbarMenu.classList.remove("is-active");
      bgOverlay.classList.remove("is-active");
   });
});

// Open and Close Search Bar Toggle
const searchBlock = document.querySelector(".search-block");
const searchToggle = document.querySelector(".search-toggle");
const searchCancel = document.querySelector(".search-cancel");

if (searchToggle && searchCancel) {
   searchToggle.addEventListener("click", () => {
      searchBlock.classList.add("is-active");
   });

   searchCancel.addEventListener("click", () => {
      searchBlock.classList.remove("is-active");
   });
}

you observe the after adding Js to the html the menu and search toggle is working

Output

Menu Toggle
Search Toggle

Leave a Comment

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

Scroll to Top