How to Build a Responsive Navigation Menu with HTML, CSS, and JavaScript

How to Build a Responsive Navigation Menu with HTML, CSS, and JavaScript

A responsive navigation menu is essential for providing a good user experience on your website, especially on mobile devices. In this tutorial, we'll show you how to create a responsive navigation menu using HTML, CSS, and JavaScript.

Step 1:

Creating the Basic HTML Structure The first step is to create the basic HTML structure of the navigation menu. We'll use an unordered list (ul) to create the menu items, and each item will be a hyperlink (a) that links to a different page on the website. We'll also create a hamburger menu button that will be used to toggle the menu on small screens.

  1. <nav class="navbar">
  2. <div class="navbar-logo">Logo</div>
  3. <ul class="navbar-links">
  4. <li><a href="#">Home</a></li>
  5. <li><a href="#">About</a></li>
  6. <li><a href="#">Services</a></li>
  7. <li><a href="#">Contact</a></li>
  8. </ul>
  9. <button class="toggle-button">
  10. <span class="bar"></span>
  11. <span class="bar"></span>
  12. <span class="bar"></span>
  13. </button>
  14. </nav>

Step 2:

Styling the Menu with CSS Next, we'll style the menu using CSS. We'll use a mobile-first approach and make the menu expand to a full menu on larger screens. We'll also add styles to the hamburger menu button and the menu items.

  1. .navbar {
  2. display: flex;
  3. justify-content: space-between;
  4. align-items: center;
  5. background-color: #333;
  6. color: white;
  7. padding: 20px;
  8. font-size: 18px;
  9. position: relative;
  10. }
  11.  
  12. .navbar * {
  13. box-sizing: border-box;
  14. }
  15.  
  16. .navbar-logo {
  17. font-weight: bold;
  18. font-size: 24px;
  19. }
  20.  
  21. .navbar-links {
  22. display: flex;
  23. justify-content: space-between;
  24. list-style: none;
  25. margin: 0;
  26. padding: 0;
  27. }
  28.  
  29. .navbar-links li {
  30. margin: 0 10px;
  31. }
  32.  
  33. .navbar-links li a {
  34. color: white;
  35. text-decoration: none;
  36. }
  37.  
  38. .toggle-button {
  39. display: none;
  40. flex-direction: column;
  41. justify-content: space-between;
  42. width: 30px;
  43. height: 21px;
  44. background-color: transparent;
  45. border: none;
  46. cursor: pointer;
  47. }
  48.  
  49. .bar {
  50. width: 100%;
  51. height: 3px;
  52. background-color: white;
  53. }
  54.  
  55. @media (max-width: 768px) {
  56. .navbar-links {
  57. display: none;
  58. flex-direction: column;
  59. align-items: center;
  60. width: 100%;
  61. margin-top: 10px;
  62. }
  63.  
  64. .navbar-links li {
  65. margin: 10px 0;
  66. }
  67.  
  68. .toggle-button {
  69. display: flex;
  70. }
  71.  
  72. .active {
  73. display: flex;
  74. position: absolute;
  75. top: 100%;
  76. left: 0;
  77. right: 0;
  78. margin-top: 0;
  79. background-color: #333;
  80. align-items: flex-end;
  81. padding-right: 26px;
  82. }
  83. }

Step 3:

Adding JavaScript Finally, we'll add JavaScript to toggle the menu on small screens when the hamburger menu button is clicked. We'll create an event listener for the button that toggles a CSS class on the menu to show or hide it.

  1. const navbar = document.querySelector('.navbar');
  2. const toggleButton = document.querySelector('.toggle-button');
  3. const navbarLinks = document.querySelector('.navbar-links');
  4.  
  5. toggleButton.addEventListener('click', () => {
  6. navbarLinks.classList.toggle('active');
  7. });

Conclusion:

In this tutorial, we showed you how to create a responsive navigation menu using HTML, CSS, and JavaScript. By using a mobile-first approach and adding JavaScript to toggle the menu on small screens, we created a menu that works well on all devices. You can further customize this menu by adding more styles and functionality, such as dropdown menus and active links.

We use cookies to improve your browsing experience. By continuing to use this website, you consent to our use of cookies. Learn More