How to Create a Vertical Tab Menu with CSS and JavaScript

how-to-create-a-vertical-tab-menu-with-css-and-javascript

A tab menu is a great way to organize content on a web page.

It allows users to easily switch between different sections of content without reloading the page.

In this tutorial, we’ll create a vertical tab menu using CSS and JavaScript.

HTML Structure

The HTML structure for our tab menu is pretty straightforward.

We’ll start by creating a container element, which will hold our tab buttons and content sections.

<div class="tab-container">
  <button class="tab-button">Tab 1</button>
  <button class="tab-button">Tab 2</button>
  <button class="tab-button">Tab 3</button>

  <div class="tab-content">Content 1</div>
  <div class="tab-content">Content 2</div>
  <div class="tab-content">Content 3</div>
</div>

In this structure, we have a .tab-container element that holds three .tab-button elements and three .tab-content elements.

The number of buttons and content sections can be increased or decreased depending on your needs.

CSS Styling

We’ll use CSS to style the tab menu. We’ll give the .tab-container a fixed width and height, and position it in the center of the page using margin: 0 auto.

.tab-container {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

Next, we’ll style the .tab-button elements by giving them a height, padding, and background color. We’ll also set their text color to white and center it using text-align: center.

.tab-button {
  height: 50px;
  padding: 10px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border: none;
  outline: none;
}

We’ll also set the .tab-content elements to have a height of 250px, and hide them using display: none. We’ll only show the content that corresponds to the active tab button.

.tab-content {
  height: 250px;
  display: none;
}

JavaScript Functionality

We’ll use JavaScript to add the functionality to our tab menu.

We’ll add an event listener to each of the .tab-button elements that will show the corresponding .tab-content element when clicked.

const tabButtons = document.querySelectorAll(".tab-button");
const tabContents = document.querySelectorAll(".tab-content");

tabButtons.forEach((tabButton, index) => {
  tabButton.addEventListener("click", () => {
    tabContents.forEach((tabContent) => {
      tabContent.style.display = "none";
    });
    tabContents[index].style.display = "block";
  });
});

In this code, we first select all the .tab-button and .tab-content elements using querySelectorAll.

Then, we loop through each .tab-button element using forEach and add an event listener to each one that listens for a click event.

When the button is clicked, the code inside the event listener will run.

In the event listener, we first loop through all the .tab-content elements and set their display property to none.

This will hide all the content sections. Next, we set the display property of the .tab-content element that corresponds to the active tab button to block.

This code will create a working vertical tab menu that allows users to switch between different sections of content.

Final Thoughts

In this tutorial, we’ve seen how to create a vertical tab menu using CSS and JavaScript.

The key is to create a well-structured HTML structure, style it with CSS, and add the functionality with JavaScript.

With these basic building blocks, you can create a wide range of tab menus to suit your needs.

I hope you found this tutorial helpful. If you have any questions or comments, please feel free to leave them below.

Tags

Related Posts