W3.CSS Navigation Tabs

Welcome to The Coding College, where we simplify web development concepts. In this tutorial, we’ll explore W3.CSS Navigation Tabs. Tabs are essential for organizing content in a compact, user-friendly way. With W3.CSS, you can create responsive and stylish navigation tabs effortlessly.

Benefits of W3.CSS Navigation Tabs

  1. Predefined Classes: Simplifies development.
  2. Customizable: Easily style tabs to match your website theme.
  3. Interactive: Switch between content without page reloads.
  4. Responsive: Works on all devices and screen sizes.
  5. Lightweight: Ensures fast load times.

1. Basic Tabs

Here’s a simple example of navigation tabs.

<div class="w3-bar w3-border-bottom">
  <button class="w3-bar-item w3-button tablink w3-light-grey" onclick="openTab(event, 'Tab1')">Tab 1</button>
  <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Tab2')">Tab 2</button>
  <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Tab3')">Tab 3</button>
</div>

<div id="Tab1" class="w3-container tab-content" style="display:none">
  <h3>Tab 1</h3>
  <p>Content for Tab 1.</p>
</div>

<div id="Tab2" class="w3-container tab-content" style="display:none">
  <h3>Tab 2</h3>
  <p>Content for Tab 2.</p>
</div>

<div id="Tab3" class="w3-container tab-content" style="display:none">
  <h3>Tab 3</h3>
  <p>Content for Tab 3.</p>
</div>

<script>
function openTab(evt, tabName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("tab-content");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-light-grey", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " w3-light-grey";
}
</script>

Explanation

  1. Tab Buttons: Use w3-bar and w3-bar-item for the tab navigation.
  2. Content Sections: Wrap tab content in w3-container and use unique id values for each tab.
  3. JavaScript Function: Toggles between tabs by hiding or showing content.

2. Adding Default Active Tab

Make one tab visible by default when the page loads.

<script>
document.getElementsByClassName("tablink")[0].click();
</script>
  • This script automatically clicks the first tab button, making it active.

3. Vertical Tabs

Create a vertical tab layout for better use of screen space.

<div class="w3-row">
  <div class="w3-col s3">
    <div class="w3-bar-block">
      <button class="w3-bar-item w3-button tablink w3-light-grey" onclick="openTab(event, 'Vertical1')">Vertical 1</button>
      <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Vertical2')">Vertical 2</button>
      <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Vertical3')">Vertical 3</button>
    </div>
  </div>
  <div class="w3-col s9">
    <div id="Vertical1" class="w3-container tab-content" style="display:none">
      <h3>Vertical 1</h3>
      <p>Content for Vertical Tab 1.</p>
    </div>
    <div id="Vertical2" class="w3-container tab-content" style="display:none">
      <h3>Vertical 2</h3>
      <p>Content for Vertical Tab 2.</p>
    </div>
    <div id="Vertical3" class="w3-container tab-content" style="display:none">
      <h3>Vertical 3</h3>
      <p>Content for Vertical Tab 3.</p>
    </div>
  </div>
</div>

Features

  • w3-col s3: Creates a column for the tab buttons (25% width).
  • w3-col s9: Allocates the remaining space for tab content.

4. Customizing Tabs

Style your tabs for a unique look.

Example

<style>
.tablink {
  border-radius: 5px;
  margin-right: 5px;
}
.tablink:hover {
  background-color: #ddd;
}
.tab-content {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
}
</style>
  • Rounded Buttons: Apply border-radius to tab buttons.
  • Hover Effects: Enhance interactivity with :hover styles.
  • Content Borders: Visually separate content sections.

5. Responsive Tabs

Ensure tabs look great on all devices by stacking them vertically on smaller screens.

<style>
@media (max-width: 600px) {
  .w3-bar .tablink {
    display: block;
    margin-bottom: 5px;
  }
}
</style>
  • Media Query: Adjusts the layout for devices with a maximum width of 600px.

Best Practices for W3.CSS Tabs

  1. Keep It Simple: Use concise labels for tabs.
  2. Use Animations: Add transitions for smooth content switching.
  3. Test Responsiveness: Verify tabs work on different screen sizes.
  4. Highlight Active Tabs: Provide visual feedback for user navigation.
  5. Enhance Accessibility: Use ARIA roles for better screen reader support.

Conclusion

W3.CSS Navigation Tabs are a powerful tool for organizing and displaying content efficiently. With minimal effort, you can build stylish, responsive, and interactive tabbed interfaces. Whether for horizontal or vertical layouts, W3.CSS makes it easy to create professional designs.

Leave a Comment