Vertical Tabs - Comment créer un menu à onglets vertical avec CSS et JavaScript ?

Les onglets sont parfaits pour les applications web à page unique, ou pour les pages web capables d'afficher différents sujets.

Dans cet article, vous allez apprendre à créer un menu à onglets vertical avec CSS et JavaScript.

Commençons par définir le code HTML nécessaire pour notre menu à onglets vertical.

Le code HTML

<h2>Vertical Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

Dans le code HTML ci-dessus, nous avons créé une div avec la classe "tab" qui représente notre menu à onglets vertical. Dans cette div, nous avons ajouté trois boutons, chacun avec la classe "tablinks". Ces boutons représentent les différents liens de notre menu à onglets vertical.

Et pour finir avec le code HTML, nous avons créé trois autres div avec la classe "tabcontent". Ces div sont le contenu associé à chacun des boutons de notre menu à onglets vertical.

Passons maitenant aux styles CSS.

Les styles CSS

* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
  color: white;
  background-color: royalblue;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
}

Dans le CSS ci-dessus, nous commençons par faire flotter la classe "tab" à gauche avec une largeur de 30%. Puis nous affichons en bloc le contenu de la classe "tab" (les boutons). Nous définissons aussi quelques propriétés CSS pour ajouter un certain effet lorsque l'on survole chaque bouton et lorsqu'on clique sur un bouton.

Enfin, nous définissons le style du contenu de chaque onglet. Pour cela, nous fixons la largeur de la classe "tabcontent" à 70% et faisons également flotter son contenu à gauche.

Pour teminer avec notre menu à onglets vertical, nous allons ajouté du JavaScript.

Le Script JavaScript

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

Dans ce code JavaScript, nous définissons le script qui nous permet de rendre notre menu à onglets vertical interactif.

Notre menu à onglets verticalest maintenant prêt comme vous pouvez le voir à l'image ci-dessous.

Et c'est tout pour ce tutoriel. À présent, vous savez comment créer un menu à onglets vertical avec CSS et JavaScript.