company logo

Before you start

Components List

Navigation

Data Display

Forms

Creating a Navigation Bar with dropdown using HTML, CSS, and Javascript

What you'll learn

  • DOM Manipulation and Event Handling
  • How to use Flexbox to create the basic layout
  • HTML Semantics
  • CSS Positioning

Prerequisites

  • Basic HTML, CSS, and Javascript
  • Completed the Basic Navbar tutorial

React verison coming soon!

The Code

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Static Site</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <nav>
            <p>Logo</p>
            <div class = "right-cont">
              <ul class = "nav-links">
                <li><a href = "/home">Home</a></li>
                <li><a href = "/about">About</a></li>
                <li>
                  <div class = "nav-dropdown" role = "button">
                     <a href = "/blog">Blog</a>
                     <svg id = "chevron" xmlns="http://www.w3.org/2000/svg" 
                     fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" 
                     width = "15px" height = "15px">
                        <path stroke-linecap="round" stroke-linejoin="round" 
                        d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                    </svg>
                    <div class="dropdown close" role = "dropdown-menu">
                      <ul class = "drop-links ">
                         <li><a href = "/item-1">Item #1</a></li>
                         <li><a href = "/item-2">Item #2</a></li>
                         <li><a href = "/item-3">Item #3</a></li>
                      </ul>
                   </div>
                  </div>
              </li>
              </ul>
              <div class = "button-cont">
                <button class = "sign-in-btn">Sign in</button>
                <button>Sign up</button>
              </div>
            </div>
        </nav>
    <script src="script.js"></script>
    </body>
    </html>
Open on CodeSandboxOpen Sandbox

* If the component preview isn't loading, try refreshing the page.

* You can adjust the size of the code preview and code by draging the sides!

Explanation

HTML

  • We are using the same HTML from our previous lesson, with a few additions. We want to create a dropdown under our blog nav-link. We will create a flex container in our <ul> to hold our Blog link and a toggle button.
  • Within this same container, we will create our dropdown menu, which also includes an <ul> of some different nav links. The reason we created this in the same container is because of our plan to use positioning to correctly place our dropdown. More on that below!
  • You may also notice some 'role' attributes added to our container and dropdown container. This allows screen readers to correctly identify what exactly our elements do.

CSS

  • We also have the same CSS but with a few changes. Our flex container mentioned previously is created with the 'nav-dropdown' class, with our basic flexbox styling.
  • For our dropdown menu, we create a class called 'dropdown', with some good old styling and a position of absolute. If you look at our original 'right-cont' class, we added a relative positioning as well. This will allow us to position our dropdown menu relatively to our container.
  • Our dropdown menu also has a class of close, which will be an added default class to hide our dropdown menu(more on this in JS). We also have a 'rotate' class that will be used to rotate the toggle button.
  • We also add some basic styling to our nav-links, to make sure they look organized.

Javascript

  • Our JS is fairly simple, we use the query and ID DOM selectors to store our HTML elements in JS variables. Our elements include the dropdown menu, our toggle button(blog div), and our SVG chevron.
  • We add a simple eventListener that toggles and untoggles the close class whenever our toggle button is clicked. We will also toggle the rotate class we had before to show the menu is open. That's it, simple right?

Made by Sam Kotecha

linkedin logo