Building a responsive navigation menu with CSS

Pixel Rocket

· 5 min read · 1 year ago

One of the most important elements on a website is the navigation menu. It helps visitors find their way around the site and discover its content. However, with the increasing use of mobile devices, it's important to make sure that the navigation menu is also responsive, meaning it adjusts to the size of the screen and provides a good user experience on all devices.

In this tutorial, we'll learn how to build a responsive navigation menu with CSS. We'll start by creating a basic menu with a few menu items, and then we'll add some styling to make it look nice. Next, we'll make the menu responsive by using media queries and some simple CSS techniques. Finally, we'll add some enhancements to improve the usability of the menu on small screens.

Let's get started!

Step 1: HTML Structure

First, let's create the HTML structure for the navigation menu. We'll use a nav element to wrap the menu, and an unordered list (ul) to contain the menu items. Each menu item will be represented by a list item (li) element, and the actual link will be an anchor (a) element inside the list item.

Here's the basic HTML code for the navigation menu:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Step 2: Basic Styling

Now let's add some basic styling to the menu. We'll use some CSS rules to give the menu a nice look and feel.

First, let's set the font size and font family for the menu items. We'll also add some padding and margin to give the menu some breathing room. Here's the CSS code for these styles:

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav li {
  font-size: 18px;
  font-family: sans-serif;
  margin: 0 10px;
  padding: 10px;
}

nav a {
  text-decoration: none;
  color: #333;
}

Next, let's add some hover effect to the menu items. When a visitor hovers over a menu item, we'll change the background color and the text color to create a visual effect. Here's the CSS code for these styles:

nav li:hover {
  background-color: #eee;
  color: #000;
}

Step 3: Media Queries

Now let's make the menu responsive. We'll use media queries to apply different styles depending on the width of the viewport.

First, let's create a media query for small screens. We'll use a breakpoint of 768 pixels, which is a common breakpoint for tablets. Inside the media query, we'll add some styles to make the menu items stack vertically and take up the full width of the screen.

Here's the CSS code for these styles:

@media (max-width: 768px) {
  nav ul {
    flex-direction: column
  }
}

Step 4: Toggle Button

On small screens, it's a good idea to have a toggle button that allows the visitor to open and close the menu. This helps to save space and make the menu more user-friendly.

To create the toggle button, we'll use a button element and some JavaScript to toggle a class on the nav element. When the class is applied, the menu will be displayed; when it's removed, the menu will be hidden.

Here's the HTML code for the toggle button:

<button id="toggle-menu">Menu</button>

And here's the JavaScript code to toggle the class:

const button = document.getElementById('toggle-menu');
const nav = document.querySelector('nav');

button.addEventListener('click', () => {
  nav.classList.toggle('show');
});

We'll also need to add some CSS styles to hide the menu on small screens and show it when the class is applied. We'll use the display property and the visibility property to achieve this.

Here's the CSS code for these styles:

nav ul {
  display: none;
}

nav.show ul {
  display: block;
}

Step 5: Enhancements

Finally, let's add some enhancements to improve the usability of the menu on small screens.

First, let's add a click event to the menu items that closes the menu when a menu item is clicked. This is useful because it allows the visitor to easily access the content on the page without having to close the menu manually.

Here's the JavaScript code to add this behavior:

const links = document.querySelectorAll('nav a');

links.forEach(link => {
  link.addEventListener('click', () => {
    nav.classList.remove('show');
  });
});

Next, let's add a smooth scroll effect to the menu items. This will make the page smoothly scroll to the anchor point when a menu item is clicked, instead of jumping abruptly.

We can use the scrollIntoView method to achieve this effect. Here's the JavaScript code to add this behavior:

links.forEach(link => {
  link.addEventListener('click', event => {
    event.preventDefault();

    const href = link.getAttribute('href');
    const element = document.querySelector(href);

    element.scrollIntoView({
      behavior: 'smooth'
    });
  });
});

Conclusion

And that's it! You now have a fully responsive navigation menu built with CSS. You can customize the styles and behavior of the menu to fit your needs and preferences. I hope you found this tutorial helpful and that you learned something new. Happy coding!

Pixel Rocket Blog