Altın Konu CSS ve JavaScript ile Dikey Sekme Menüsü Oluşturmak..

ByESiNTi · 26 Tem 2021

Dikey Sekmeler
Sekmeler, tek sayfa web uygulamaları veya farklı konuları görüntüleyebilen web sayfaları için mükemmel görsellik verir..
CSS ve JavaScript ile dikey sekme menüsünün nasıl oluşturulacağını gösterelim..

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Resimdeki dikey sekme menüsünün tek parça kodlarını linkten indirebilirsiniz..

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Detaylı Anlatalım:

Değiştirilebilir Dikey Sekmeler Oluşturun

Adım 1) HTML'yi ekleyin:

Örnek:

Kod:

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">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>

Belirli sekme içeriğini açmak için düğmeler oluşturun. Tüm <div> öğeleri class="tabcontent"varsayılan olarak gizlidir (CSS ve JS ile) - kullanıcı bir düğmeyi tıkladığında - bu düğmeyle "eşleşen" sekme içeriğini açar.

Adım 2) CSS'yi ekleyin:

Düğmelere ve sekme içeriğine stil verin:

Kod:

* {box-sizing: border-box}

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

/* Style the buttons that are used to open the tab content */
.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;
}

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

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

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

Adım 3) JavaScript'i ekleyin:

Kod:

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}