- Katılım
- 19 Ocak 2024
- Mesajlar
- 160
- Tepkime puanı
- 11
- Puanları
- 18
- Ödüller
- 6
HTML ile Dinamik İçerik Geçişleri: Sekmeli Yapı (Tab System)
Sekmeli yapılar (tab system), bir web sayfasındaki içerikleri düzenli bir şekilde göstermek ve kullanıcı etkileşimini artırmak için harika bir yöntemdir. Bu yazıda, HTML, CSS ve JavaScript kullanarak nasıl bir sekmeli içerik yapısı oluşturabileceğinizi öğrenebilirsiniz.
Temel Sekme Yapısı
HTML ile temel bir sekme yapısını şu şekilde oluşturabilirsiniz:
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>HTML Sekmeli Yapı</title>
<style>
.tab-container {
width: 100%;
max-width: 600px;
margin: auto;
}
.tabs {
display: flex;
justify-content: space-between;
cursor: pointer;
background-color: #f4f4f4;
padding: 10px 0;
}
.tabs div {
flex: 1;
text-align: center;
padding: 10px;
border: 1px solid #ddd;
}
.tabs div.active {
background-color: #007BFF;
color: white;
}
.tab-content {
border: 1px solid #ddd;
border-top: none;
padding: 20px;
display: none;
}
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<div class="tab-container">
<div class="tabs">
<div class="tab active" data-tab="tab1">Sekme 1</div>
<div class="tab" data-tab="tab2">Sekme 2</div>
<div class="tab" data-tab="tab3">Sekme 3</div>
</div>
<div id="tab1" class="tab-content active">
<h2>Sekme 1 İçeriği</h2>
<p>Bu, birinci sekme için içeriği gösterir.</p>
</div>
<div id="tab2" class="tab-content">
<h2>Sekme 2 İçeriği</h2>
<p>Bu, ikinci sekme için içeriği gösterir.</p>
</div>
<div id="tab3" class="tab-content">
<h2>Sekme 3 İçeriği</h2>
<p>Bu, üçüncü sekme için içeriği gösterir.</p>
</div>
</div>
<script>
const tabs = document.querySelectorAll(".tab");
const contents = document.querySelectorAll(".tab-content");
tabs.forEach(tab => {
tab.addEventListener("click", () => {
tabs.forEach(t => t.classList.remove("active"));
contents.forEach(c => c.classList.remove("active"));
tab.classList.add("active");
document.getElementById(tab.dataset.tab).classList.add("active");
});
});
</script>
</body>
</html>Sekmeli Yapının Çalışma Prensibi
1. Sekme başlıkları için bir tab-container oluşturulur.
2. Her sekme başlığına bir data-tab özelliği atanır.
3. JavaScript, tıklanan sekmeyi algılar ve ilgili içeriği aktif hale getirir.
4. CSS, sekme görünümünü ve geçişleri düzenler.
Özelleştirme ve Ek Özellikler
Sekmeli yapınızı daha dinamik ve kullanıcı dostu hale getirmek için aşağıdaki özellikleri ekleyebilirsiniz:
1. Geçiş Animasyonu Ekleyin
Sekmeler arasında geçiş yaparken bir fade-in animasyonu oluşturabilirsiniz:
CSS:
.tab-content {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.tab-content.active {
opacity: 1;
}2. Mobil Uyumluluk
CSS ile sekme yapısını mobil cihazlara uygun hale getirin:
CSS:
@media (max-width: 768px) {
.tabs {
flex-direction: column;
}
.tabs div {
margin-bottom: 5px;
}
}3. Varsayılan Sekme Belirleme
Varsayılan olarak hangi sekmenin açık olacağını kontrol edebilirsiniz. Yukarıdaki kodda, `class="active"` ekleyerek varsayılan sekme belirlenmiştir.
Kullanım Alanları
- Ürün detayları ve açıklamalar
- Sıkça Sorulan Sorular (SSS) bölümleri
- Kullanıcı profili ve ayar sayfaları
- Çoklu içerik gösterimi gereken blog veya portföy projeleri
Son Öneriler
Sekmeli yapılar, içerikleri düzenli bir şekilde göstermek ve kullanıcı deneyimini artırmak için güçlü bir yöntemdir. CSS ile şık bir tasarım ve JavaScript ile dinamik bir yapı oluşturarak, projelerinizde profesyonel bir görünüm sağlayabilirsiniz.
