Navbar with Dropdown Menu

Elevate user experience on your website with a navbar featuring dropdown menus. Learn how to implement intuitive dropdown navigation to provide users with easy access to additional options or content.

Create a functional and visually appealing navbar with a dropdown menu for your website using HTML, CSS, and JavaScript. This comprehensive guide will walk you through the process of integrating and customizing a responsive navigation bar with dropdown menus, ensuring an intuitive user experience across different devices.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML, CSS, and JavaScript code snippet for the navbar with a dropdown menu. This snippet includes the foundational structure, styles, and basic functionality needed to create a responsive navbar with dropdown menus. Select the code, click the copy button, and paste it into your HTML file where you want the navbar to appear.

Step 2: Link CSS, Material Icons, and JavaScript Files

  • Ensure the necessary CSS, Material Icons, and JavaScript files are linked correctly in your HTML document. Add the following <link> tags in the <head> section to import the CSS styles and Material Icons: 
    <link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  • Include the following <script> tag at the end of your <body> section to import the JavaScript file: 
    <script src="script.js"></script>
  • Replace "styles.css" and "script.js" with the actual file names where you have saved your CSS and JavaScript code.

Step 3: Customize and Make it Yours

  • Personalize the navbar with a dropdown menu to match your website's aesthetics and functionality requirements. Adjust the CSS styles and JavaScript code to modify the navbar's appearance, dropdown behavior, and interaction features. Experiment with different styles, icons, and responsive design techniques to create a unique and engaging navigation experience.

By following these steps, you can implement and customize a navbar with a dropdown menu on your website using HTML, CSS, and JavaScript. Make the navbar component your own by adjusting styles, adding custom icons, and enhancing the dropdown menu functionality to create a user-friendly and visually appealing navigation experience.

Code Explanation

HTML Code

Burger Menu Button
<button onclick="toggleMenu()" class="burger"></button>
  • This button triggers a JavaScript function named toggleMenu() when clicked. It typically controls the visibility of the dropdown menus.
Main Navigation Button
<button class="button">Home</button>
  • Represents a basic navigation button for "Home". It might lead to the main page of the website.
Dropdown Menus (<div class="dropdowns">)

Each dropdown (<div class="dropdown">) contains:

Dropdown Button

<button class="button">
  Services
  <svg>...</svg>
</button>
  • Displays the name of the section (e.g., "Services", "Products", "Support") with an accompanying SVG icon.

Dropdown Menu (<div class="dropdown-menu">): Contains specific options for each section.

<div class="dropdown-menu">
  <button>UX/UI Design</button>
  <button>Web Applications</button>
  <button>SEO Advice</button>
</div>
  • Provides links or actions related to the section (e.g., services offered, products available, support options).

CSS Code

Global Styles
body {
  background: #2c2c32;
}
  • Sets the background color of the entire page to a dark shade.
button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  color: inherit;
  font-family: "Poppins";
  font-size: 20px;
}
  • Resets button styles to remove default border and padding.
  • Makes the button background transparent and sets the cursor to pointer.
  • Inherits text color and sets the font to "Poppins".
  • Sets the font size to 20px and ensures a consistent line height.
Responsive Button Font Size
@media (width >= 500px) {
  button {
    font-size: 16px;
  }
}
  • Adjusts the button font size to 16px when the viewport width is 500px or larger.
Positioning and Layout
:is(.navbar, .burger, .dropdowns) {
  position: fixed;
  top: 0;
  width: 100%;
}
  • Sets .navbar, .burger, and .dropdowns to be fixed at the top of the viewport and span the full width.
Navbar Styles
.navbar {
  z-index: 1;
  left: 0;
  display: flex;
  align-items: stretch;
  height: 72px;
  background: #19191c;
  color: #f9f9f9;
}
  • Positions the navbar at the top with a z-index of 1.
  • Stretches its height to 72px, and sets the background and text colors.
Burger Button Styles
.burger {
  z-index: 3;
  right: 0;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background-image: url("menu.svg");
  background-repeat: no-repeat;
  background-position: center;
}
  • Positions the burger button at the top right with a z-index of 3.
  • Centers the background image inside the button.
body.open .burger {
  background-image: url("close.svg");
}
  • Changes the burger button image to a close icon when the body has the open class.
@media (width >= 500px) {
  .burger {
    display: none;
  }
}
  • Hides the burger button on screens 500px or wider.
Button Styles
.button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 24px;
  height: 100%;
  opacity: 0.6;
}
  • Styles buttons to be flex containers with centered content and a gap of 4px between items.
  • Adds padding and sets opacity to 0.6 for a translucent effect.
.button > img {
  display: none;
}
  • Hides images inside buttons by default.
@media (width >= 500px) {
  .button {
    padding: 0 10px 0 24px;
  }
  .button > img {
    display: block;
  }
}
  • Adjusts button padding and displays images inside buttons on screens 500px or wider.
Dropdown Styles
@media (width >= 500px) {
  .dropdown:hover .button {
    opacity: 1;
  }
}
  • Sets button opacity to 1 on hover for screens 500px or wider.
.dropdowns {
  left: -9999px;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0d0d0e;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: 0.3s;
}
  • Positions dropdowns off-screen, with a z-index of 2.
  • Centers content vertically and horizontally, with a dark background.
  • Hides dropdowns by default with a transition for opacity and visibility.
@media (width < 500px) {
  body.open .dropdowns {
    opacity: 1;
    visibility: visible;
    left: 0;
  }
}
  • Shows dropdowns on smaller screens when the body has the open class.
@media (width >= 500px) {
  .dropdowns {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    background: transparent;
    opacity: 1;
    visibility: visible;
  }
}
  • Adjusts dropdown styles for larger screens, making them visible and transparent by default.
Individual Dropdown Styles
.dropdown {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}
  • Positions each dropdown relative to its container, with centered and column-aligned content.
.dropdown-menu {
  display: grid;
  margin-bottom: 28px;
}
  • Displays the dropdown menu as a grid with a bottom margin.
@media (width >= 500px) {
  .dropdown {
    height: 100%;
    flex-direction: row;
  }
  .dropdown-menu {
    position: absolute;
    top: 72px;
    left: 0;
    width: 180px;
    padding: 6px 24px 10px;
    margin-bottom: 0;
    place-items: start;
    background: #19191c;
    opacity: 0;
    visibility: hidden;
    translate: 0 24px;
    transition: 0.3s;
  }
  .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }
}
  • Adjusts dropdown styles for larger screens, making menus absolute and hidden by default.
  • Shows dropdown menus on hover with transitions.
Dropdown Menu Button Styles
.dropdown-menu > button {
  color: #f9f9f9;
  opacity: 1;
  height: 40px;
}
  • Styles buttons inside dropdown menus with specific color, opacity, and height.
@media (width >= 500px) {
  .dropdown-menu > button {
    opacity: 0.6;
  }
  .dropdown:hover .button {
    opacity: 1;
  }
}
  • Adjusts button opacity for larger screens.
.dropdown-menu > button:hover {
  opacity: 1;
}
  • Sets button opacity to 1 on hover for better visibility.

JavaScript Code

Function Declaration:
const toggleMenu = () => {
  • const toggleMenu: Declares a constant named toggleMenu, which is a function.
  • () => { ... }: Defines the function using arrow function syntax.
Function Body:
document.body.classList.toggle("open");
  • document.body: Refers to the <body> element of the HTML document.
  • classList: Provides access to the list of classes of the <body> element.
  • toggle("open"): Toggles the presence of the class "open" on the <body> element.