Search Bar with Dropdown Menu

Streamline website navigation and search functionality with a search bar featuring a dropdown menu. Learn how to implement a versatile search bar that offers users easy access to search suggestions.

Enhance user experience on your website with a versatile search bar featuring a dropdown menu. This tutorial will guide you through the process of integrating and customizing a search bar using HTML and CSS.

Step 1: Copy the Code Snippet

  • Begin by copying the provided HTML and CSS code snippet for the search bar with the dropdown menu. This snippet includes the structure and basic styles required to create a functional search component.

Step 2: Link CSS

  • Ensure the styles.css file is correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles: 
    <link rel="stylesheet" href="styles.css">

Step 3: Customize and Make it Yours

  • Customize the search bar and dropdown menu to match your website's theme and functionality requirements. Modify the HTML structure to include additional dropdown items, adjust CSS styles (styles.css) for colors, sizes, and dropdown behavior (e.g., animation, hover effects), and integrate JavaScript for dynamic search functionalities if needed.

By following these steps, you can implement and personalize a search bar with a dropdown menu using HTML and CSS, enhancing search capabilities and user interaction on your website.

Code Explanation

HTML Code

Navigation (<nav>):
<nav>
  <img src="https://raw.githubusercontent.com/frontend-joe/css-dropdowns/e3b974065a57c868b3def6074d238c36e75ef2cd/dropdown-2/canva.svg" />
  <img class="burger" src="https://raw.githubusercontent.com/frontend-joe/css-dropdowns/e3b974065a57c868b3def6074d238c36e75ef2cd/dropdown-2/burger.svg" />
  <div class="dropdown">
    <!-- Dropdown content -->
  </div>
</nav>
  • The <nav> element defines a navigation section.
  • Contains two <img> elements and a <div> for dropdown functionality.
First Image (<img>):
<img src="https://raw.githubusercontent.com/frontend-joe/css-dropdowns/e3b974065a57c868b3def6074d238c36e75ef2cd/dropdown-2/canva.svg" />
  • Displays an image sourced from a URL, presumably a logo or an icon related to Canva.
Second Image with Class (<img class="burger">):
<img class="burger" src="https://raw.githubusercontent.com/frontend-joe/css-dropdowns/e3b974065a57c868b3def6074d238c36e75ef2cd/dropdown-2/burger.svg" />
  • Another image, an icon representing a burger menu (typically used for mobile navigation menus).
Dropdown Container (<div class="dropdown">):
<div class="dropdown">
  <img class="search" src="https://raw.githubusercontent.com/frontend-joe/css-dropdowns/e3b974065a57c868b3def6074d238c36e75ef2cd/dropdown-2/search.svg" />
  <input type="text" placeholder="Try logo, poster, anything!" />
  <div class="menu">
    <!-- Dropdown menu content -->
  </div>
</div>
  • Contains:
    • An <img> with class search, presumably an icon for search functionality.
    • An <input> field of type text with a placeholder suggesting its purpose.
    • A <div> with class menu that houses a list of <button> elements.
Dropdown Menu Content (<div class="menu">):
<div class="menu">
  <div class="menu-content">
    <!-- List of buttons -->
  </div>
</div>
  • Nested within the .dropdown div.
  • Contains a <div> with class menu-content, which holds several <button> elements.
Dropdown Menu Buttons (<button>):
<button>
  <img src="https://raw.githubusercontent.com/frontend-joe/css-dropdowns/e3b974065a57c868b3def6074d238c36e75ef2cd/dropdown-2/video.svg" />
  <span>Video</span>
  <span>1920 / 1080 px</span>
</button>
<!-- More buttons follow with similar structure -->
  • Each <button> includes:
    • An <img> displaying an icon.
    • Two <span> elements providing text information.

CSS Code

Universal Box Sizing:
* {
  box-sizing: border-box;
}
  • Ensures all elements on the page include padding and border sizes in their total width and height calculations, maintaining consistency across layouts.
Setting HTML and Body Height:
html,
body {
  height: 100%;
}
  • Ensures that the <html> and <body> elements take up the full height of the viewport.
Body Styles:
body {
  margin: 0;
  font-family: "Inter Var";
}
  • Removes default margins and sets the font family for the entire document to "Inter Var".
Styling for Navigation (<nav>):
nav {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #ffffff;
  width: 100%;
  height: 60px;
  padding: 0 20px;
  box-shadow: 0 2px 4px -1px rgba(57, 76, 96, 0.15);
}
  • Turns the <nav> element into a flex container, aligning items vertically centered with a gap of 20px between them.
  • Sets a white background with padding of 20px, height of 60px, and adds a subtle box-shadow for depth.
Styling for Burger Icon:
.burger {
  width: 16px;
  height: 16px;
}
  • Specifies dimensions for a .burger class, presumably used for a hamburger menu icon.
Dropdown Container Styles (<div class="dropdown">):
.dropdown {
  position: relative;
  width: 200px;
  height: 40px;
}
  • Defines a dropdown container with a relative position, 200px width, and 40px height.
Search Input and Search Icon (<input> and .search):
input,
.search {
  position: absolute;
}
input {
  z-index: 2;
  top: 2px;
  height: 36px;
  width: 198px;
  border: 1px solid #dfe4e7;
  outline: none;
  padding-left: 34px;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
}
.search {
  top: 13px;
  left: 10px;
  z-index: 3;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
  • Positions the <input> and .search icon absolutely within their parent container.
  • Styles the input with specific dimensions, border, padding, and background.
  • Positions the search icon and adjusts its dimensions and placement.
Menu Container Styles (<div class="menu">):
.menu {
  z-index: 1;
  position: absolute;
  height: 40px;
  width: 100%;
  transition-property: width;
  transition-duration: 0.3s;
}
  • Positions the .menu absolutely, establishes initial dimensions and transition properties for animation effects.
Dropdown Interaction Effects:
input:focus ~ .menu {
  box-shadow: 0 0px 8px 0 rgba(57, 76, 96, 0.18);
  height: 170px;
  width: 290px;
  padding-top: 40px;
  border-radius: 4px;
  background: #fff;
}
input:focus ~ .menu .menu-content {
  visibility: visible;
  opacity: 1;
  transition: 0.3s;
}
  • Defines styles for when the <input> field is focused, expanding the .menu and adjusting its appearance and visibility.
  • Ensures smooth transitions for .menu-content when becoming visible.
Styling for Menu Content (<div class="menu-content">):
.menu-content {
  position: absolute;
  width: inherit;
  visibility: hidden;
  opacity: 0;
  border-top: 1px solid #dfe4e7;
}
  • Positions the .menu-content absolutely, initially hidden (visibility: hidden; opacity: 0;) with a top border.
Button Styles within Menu:
.menu button {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 12px 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13px;
}
  • Styles buttons within the .menu, arranging them in a flex container with space between items, setting padding, background, and cursor properties.
Additional Button Icon and Text Styles:
.menu button img {
  width: 16px;
  height: 16px;
}
.menu button span:last-child {
  opacity: 0;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.4);
}
.menu button:hover span:last-child {
  opacity: 1;
}
  • Sets dimensions for images within buttons.
  • Adjusts opacity, font size, and color for the last <span> child within buttons, showing on hover.
Span Styling:
span {
  white-space: nowrap;
}
  • Ensures that text within <span> elements does not wrap to the next line, maintaining a single line of text.