Altın Konu CSS ve JavaScript ile Tam Sayfa Sekmeleri Oluşturma Rehberi

GUNNERIUS · 21 Şub 2024

Tam sayfa sekmeleri, web sitelerinde kullanıcıların içeriği tam ekran olarak görüntüleyebilecekleri ve gezinebilecekleri kullanışlı bir arayüz öğesidir. CSS ve JavaScript kullanarak, web sayfalarınızda tam sayfa sekmeleri oluşturabilir ve kullanıcı deneyimini daha etkileyici hale getirebilirsiniz. Bu makalede, CSS ve JavaScript ile tam sayfa sekmelerinin nasıl oluşturulacağını adım adım açıklayacağız ve örneklerle destekleyeceğiz.

Tam Sayfa Sekmeleri Nedir?

Tam sayfa sekmeleri, web sitelerinde farklı içerikleri tam ekran boyutunda göstermek için kullanılan bir arayüz öğesidir. Genellikle yan yana veya üst üste sıralanmış düğmeler veya bağlantılar olarak gösterilir ve kullanıcılar her bir sekmeye tıkladıklarında, ilgili içerik tam ekran boyutunda görüntülenir.

HTML Yapısı

Öncelikle, tam sayfa sekmelerini HTML içinde oluşturmalıyız. Her bir sekmeye karşılık gelen düğmeleri veya bağlantıları ve her bir sekme için ayrı içerik bölümlerini belirteceğiz.

[CODE lang="html" title="html"]<div class="tam-sayfa-sekmeleri">
<button class="sekme-dugmesi" onclick="acSekme(event, 'sekme1')">Sekme 1</button>
<button class="sekme-dugmesi" onclick="acSekme(event, 'sekme2')">Sekme 2</button>
<button class="sekme-dugmesi" onclick="acSekme(event, 'sekme3')">Sekme 3</button>

<div id="sekme1" class="sekme-icerik">
İçerik 1 burada
</div>
<div id="sekme2" class="sekme-icerik">
İçerik 2 burada
</div>
<div id="sekme3" class="sekme-icerik">
İçerik 3 burada
</div>
</div>[/CODE]

Yukarıdaki HTML kodunda, her bir sekme düğmesi bir <button> elemanı olarak tanımlanmıştır. Her bir içerik bölümü ise bir <div> elemanı olarak belirtilmiştir. Her bir içerik bölümü, ilgili sekme düğmesine karşılık gelen bir id değerine sahiptir.

CSS Stilleri

Sekmelerin ve içerik bölümlerinin görünümünü belirlemek için CSS kullanacağız. Bu şekilde sekmelerin stilini özelleştirebileceğiz.

[CODE lang="css" title="css"].tam-sayfa-sekmeleri {
overflow: hidden;
}

.sekme-dugmesi {
background-color: #f2f2f2;
color: black;
padding: 15px 20px;
float: left;
cursor: pointer;
border: none;
outline: none;
width: 33.33%;
}

#f2f2f2dugmesi:hover {
background-color: #ddd;
}

.sekme-icerik {
display: none;
padding: 20px;
clear: both;
}

.sekme-icer#f2f2f2dugmesi:hoversplay: block;
}[/CODE#dddukarıdaki CSS kodunda, tam sayfa sekmelerinin ve içerik bölümlerinin görünümünü belirledik. Başlangıçta, ilk içerik bölümünün görüntülenmesini sağladık ve diğer içerik bölümlerini gizledik.

JavaScript ile İşlevsellik Ekleme

Sekmeler arasında geçiş yapabilmek için JavaScript kullanacağız. Her bir sekme düğmesine tıklandığında, ilgili içerik bölümünün görünür hale gelmesini sağlayacağız.

[CODE lang="javascript" title="jsx"]function acSekme(evt, sekmeAdi) {
var i, sekmeIcerik, sekmeDugmesi;

sekmeIcerik = document.getElementsByClassName("sekme-icerik");
for (i = 0; i < sekmeIcerik.length; i++) {
sekmeIcerik.style.display = "none";
}

sekmeDugmesi = document.getElementsByClassName("sekme-dugmesi");
for (i = 0; i < sekmeDugmesi.length; i++) {
sekmeDugmesi.className = sekmeDugmesi.className.replace(" active", "");
}

document.getElementById(sekmeAdi).style.display = "block";
evt.currentTarget.className += " active";
}[/CODE]

Bu JavaScript fonksiyonu, acSekme adıyla tanımlanmıştır ve bir olay argümanı (evt) ve açılacak sekmenin adı (`sekmenin adı (sekmeAdi) ile çağrılır. Her bir sekme düğmesine tıklandığında, önce tüm içerik bölümleri gizlenir ve sonra sadece seçilen içerik bölümü görünür hale getirilir. Ayrıca, seçilen sekme düğmesinin üzerine bir active sınıfı eklenir.

Bu makalede, CSS ve JavaScript ile tam sayfa sekmelerinin nasıl oluşturulacağını öğrendik. HTML yapısını oluşturarak, CSS ile stil belirleyerek ve JavaScript ile işlevsellik ekleyerek, web sitelerinizde kullanıcıların içeriği tam ekran boyutunda görebileceği ve erişebileceği bir tam sayfa sekme sistemi oluşturduk.

Umarım bu rehber, tam sayfa sekmeleri oluşturma konusunda size faydalı olmuştur. Başka sorularınız varsa, çekinmeden sormaktan çekinmeyin!

İyi tasarımlar ve kodlamalar dilerim!