Designing a custom menu bar with HTML, CSS, and JavaScript

In this tutorial, we will be designing a custom menu bar with HTML, CSS, and JavaScript. A menu bar is a common navigation element that is used on most websites. It is important to have a well-designed menu bar as it helps users to easily navigate through your website.

We will be using HTML to create the structure of the menu bar, CSS to style it, and JavaScript to add interactivity.

HTML Structure

We will start by creating the basic structure of the menu bar. The menu bar will consist of a list of links, and each link will be a list item.

Here is the HTML code:

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

We have used the nav element to wrap our menu bar. The ul element is used to create an unordered list of links, and each link is represented by an li element. The a element is used to create a hyperlink.

CSS Styling

Next, we will style our menu bar using CSS. We will add some basic styles to make the menu bar look more appealing.

nav {
  background-color: #333;
  height: 50px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

In the above CSS code, we have set the background color of the nav element to #333. We have also set the height of the nav element to 50px. We have used the list-style-type property to remove the bullet points from the list. We have also set the margin and padding of the ul element to 0.

We have set the float property of the li element to left to make the menu items appear horizontally. We have also set the display property of the a element to block so that it takes up the full width of the list item. We have set the color of the a element to white and the text-align property to center.

We have set the padding of the a element to 16px to create some space between the text and the border of the list item. We have also set the text-decoration property to none to remove the underline from the hyperlink.

Finally, we have added a hover effect to the a element. When the user hovers over a link, the background color of the list item will change to #111.

JavaScript Interactivity

Now, we will add some interactivity to our menu bar using JavaScript. We will add a class called active to the selected link, and remove it from the other links.

const menuItems = document.querySelectorAll('li a');

menuItems.forEach(item => {
  item.addEventListener('click', function() {
    menuItems.forEach(item => {
      item.classList.remove('active');
    });
    this.classList.add('active');
  });
});

In the above JavaScript code, we have selected all the links using the querySelectorAll method. We have added an event listener to each link using the forEach method. When a link is clicked, we loop through all the links and remove the active class from them. We then add the active class to the clicked link using the classList.add method.

We can add some CSS styles to the active class to highlight the selected link. Here is the CSS code:

li a.active {
  background-color: #4CAF50;
}

This code will set the background color of the selected link to #4CAF50.

Conclusion

In this tutorial, we have designed a custom menu bar using HTML, CSS, and JavaScript. We have created the structure of the menu bar using HTML, added styles to it using CSS, and added interactivity to it using JavaScript. You can further customize the menu bar by adding more styles or adding more functionality using JavaScript.