Navigation Bar with Dropdown Menus

Elevate user experience on your website with a navigation bar featuring dropdown menus. Learn how to integrate dropdown navigation into your navbar to provide users with additional content.

Adding a navigation bar with dropdown menus can improve user navigation and organization on your website. This guide will walk you through creating a navigation bar with dropdown menus using HTML and CSS. Follow these steps to copy the provided code snippet, link the required CSS files, and customize the navbar to fit your specific requirements.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML and CSS code snippet below. This snippet includes the foundational structure and styles for the navigation bar with dropdown menus. Select the code, copy it, and paste it into your HTML and CSS files.

Step 2: Link CSS Files

  • Ensure the 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

  • Personalize the navigation bar to match your website's branding and functionality. Adjust the CSS styles to modify the navbar's appearance, colors, and dropdown menu behavior. Experiment with different hover effects, fonts, and layouts to create a navigation bar that seamlessly integrates with your website's design.

By following these steps, you can implement and customize a navigation bar with dropdown menus on your website using HTML and CSS. Tailor the navbar to your specific needs and enhance user navigation and engagement effectively.

Code Explanation

HTML Code

Navigation (nav):

  • The <nav> element signifies a navigation section of the webpage.

Navigation Items (a.item):

  • Each <a> element with the class item represents a navigation link.
  • Home and About are straightforward links.

Dropdown Menu for Skills:

  • <div class="item">Skills ... </div>: This div serves as a container for the "Skills" menu item.
  • When users hover or click on "Skills", a dropdown menu appears.
  • Dropdown (div.dropdown):
    • The inner <div> under dropdown contains links for specific skills (React, Angular, Vue).

Contact Link:

  • <a class="item">Contact</a>: This link directs users to a contact page or section.

Underline (div.underline):

  • <div class="underline"></div>: This <div> element likely serves as a decorative underline or separator for the navigation items.

CSS Code

Universal Box Sizing:
* {
  box-sizing: border-box;
}
  • Ensures all elements include padding and border sizes in their total width and height calculations.
Root Variables:
:root {
  --color-primary: #2f67ec;
}
  • Defines a custom CSS variable --color-primary with a blue shade (#2f67ec), likely intended for consistent color usage across the stylesheet.
Body Styling:
body {
  font-family: "Poppins";
  background: #12161f;
  color: white;
  margin: 0;
  height: 94vh;
  display: grid;
  place-items: center;
}

Sets the overall styling for the body:

  • Uses the "Poppins" font family.
  • Sets a dark background color (#12161f) and white text color.
  • Removes body margins and centers content vertically using display: grid and place-items: center.
  • Ensures the body occupies 94% of the viewport height (94vh).
Basic Navigation Styling:
nav {
  position: relative;
  background: #1f2635;
  font-weight: 400;
  font-size: 0;
  display: flex;
  padding: 0;
  width: 80%;
}

Styles the nav element:

  • Positions it relatively to its normal flow.
  • Sets a dark blue background (#1f2635).
  • Resets font size to 0 (likely to handle inline-block spacing issues).
  • Uses flexbox to layout navigation items horizontally.
  • Sets padding to 0 and limits width to 80% of its containing block.
Navigation Items (nav .item):
nav .item {
  font-size: 0.8rem;
  display: inline-block;
  position: relative;
  padding: 0 20px;
  cursor: pointer;
  z-index: 5;
  min-width: 25%;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

Styles each navigation item (a.item):

  • Sets font size to 0.8rem.
  • Displays items inline-block to allow for horizontal arrangement.
  • Positions items relatively for absolute positioning of dropdowns.
  • Adds padding around each item.
  • Defines cursor as pointer for interactive feedback.
  • Sets a minimum width of 25% of its container.
  • Ensures items have a fixed height and vertically centers text using line-height.
Dropdown Container (div.dropdown):
.dropdown {
  overflow: hidden;
  list-style: none;
  position: absolute;
  padding: 0;
  width: 100%;
  left: 0;
  top: 62px;
}

Styles the dropdown container:

  • Hides overflow to manage content overflow.
  • Removes list-style for cleaner appearance.
  • Positions absolutely relative to its parent (nav).
  • Sets padding to 0 and spans the full width.
Dropdown Items (div.dropdown > div):
.dropdown > div {
  transform: translate(0, -100%);
  transition: all 0.5s 0.1s;
  position: relative;
}

Styles each dropdown item container:

  • Initially translates items above (translate(0, -100%)) to hide them off-screen.
  • Applies a transition effect (all 0.5s 0.1s) for smooth animation.
  • Sets relative positioning.
Dropdown Links (dropdown a):
.dropdown a {
  display: block;
  padding: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: var(--color-primary);
}

Styles links within the dropdown:

  • Displays as block elements for full width.
  • Removes padding to ensure consistent spacing.
  • Sets fixed height and vertically centers text using line-height.
  • Applies a background color defined by --color-primary.
Dropdown Link Hover State:
.dropdown a:hover {
  background: #254fb5;
}
  • Changes background color on hover to provide visual feedback (#254fb5 is a darker shade of blue).
Underline (div.underline):
.underline {
  height: 6px;
  background: var(--color-primary);
  position: absolute;
  bottom: 0;
  width: 25%;
  z-index: 2;
  pointer-events: none;
  transition: 0.35s;
}

Styles the underline effect:

  • Sets height to 6px and uses --color-primary for background color.
  • Positions absolutely at the bottom of the navigation.
  • Spans 25% width of the navigation.
  • Sets z-index to ensure it appears above other elements but below dropdowns.
  • Disables pointer events to allow clicks on items.
  • Applies a smooth transition effect over 0.35 seconds.
Dropdown Display on Hover:
nav .item:hover > .dropdown > div {
  transform: translate(0);
}
  • When hovering over a navigation item (nav .item), moves its associated dropdown (div.dropdown > div) into view (translate(0)).
Underline Positioning on Hover:
nav .item:nth-child(1):hover ~ .underline {
  transform: translate(0, 0);
}

nav .item:nth-child(2):hover ~ .underline {
  transform: translate(100%, 0);
}

nav .item:nth-child(3):hover ~ .underline {
  transform: translate(200%, 0);
}

nav .item:nth-child(4):hover ~ .underline {
  transform: translate(300%, 0);
}
  • Positions the underline (div.underline) relative to each navigation item (nav .item) on hover.
  • Moves the underline horizontally based on the order (nth-child) of the hovered item.
Responsive Behavior:
@media (width <= 580px) {
  .menu-right img:nth-child(n + 3) {
    display: none;
  }
  .menu-items {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 16px;
    position: absolute;
    top: 60px;
    left: 0;
    padding: 0 20px 20px;
    background: #161b22;
  }
  .menu-left {
    flex-direction: column;
    gap: 12px;
  }
  .menu-left a {
    border-bottom: 1px solid #30363d;
    padding-bottom: 10px;
  }
  .menu-right {
    margin-left: 0;
  }
  .burger {
    display: block;
  }
}
  • Adjusts layout and visibility for smaller screens (width less than or equal to 580px).
  • Hides certain elements (like img:nth-child(n + 3)) to optimize space.
  • Rearranges dropdown and menu items (menu-items and menu-left).
  • Displays the burger icon (svg.burger) for navigation menu access on small screens (display: block).