Bundan önceki içeriklerimizin birisinde jQuery ile tab menü yapımı ile ilgili adımları, kodları incelemiş idik. Şimdi ise yalnızca JavaScript kullanarak, elbette biraz da CSS ve HTML ile birlikte tab menü yapımını öğreniyor olacağız. Böylelikle web sitenize çok hızlı çalışan ve sorunsuz tab menü eklemeyi düşünebilirsiniz. Kodları aşağıda paylaşıyor olacağız, dilediğiniz gibi değiştirebilir ve güncelleyebilirsiniz. Bilmeyenlere faydalı olmasını temenni ederek, ilgili adımlara geçiyoruz.

AYRICA: Blogger için Sekmeli Menü (Tab Menü) Yapımı

JavaScript Kullanarak Tab Menü Yapımı

1) Temanızın CSS bölümüne aşağıdaki kodları ekleyin.

/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 12px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 20px 20px;
border: 1px solid #ccc;
border-top: none;
}


2) HTML kısmına aşağıdaki kodları ekleyin.

<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Tab Menü 1')" id="defaultOpen">Tab Menü 1</button>
<button class="tablinks" onclick="openCity(event, 'Tab Menü 2')">Tab Menü 2</button>
</div>
<div id="Tab Menü 1" class="tabcontent">
1. İçerik Alanı
</div>
<div id="Tab Menü 2" class="tabcontent">
2. İçerik Alanı
</div>


3) JavaScript kodlarımız ise aşağıdaki gibidir.

<script>
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();
</script>


Örnek Görünüm

Kaynak: W3Schools