Altın Konu CSS ve JavaScript ile Dikey Sekme Menüsü Nasıl Oluşturulur?

GUNNERIUS · 21 Şub 2024

Dikey sekme menüleri, web sitelerinde içeriğin organize edilmesi ve gezinmenin kolaylaştırılması için kullanılan kullanışlı bir arayüz öğesidir. CSS ve JavaScript kullanarak, web sayfalarınızda dikey sekme menüleri oluşturabilir ve içeriği daha erişilebilir hale getirebilirsiniz. Bu makalede, CSS ve JavaScript ile dikey sekme menüsünün nasıl oluşturulacağını adım adım açıklayacağız ve örneklerle destekleyeceğiz.

Dikey Sekme Menüsü Nedir?

Dikey sekme menüsü, web sitesinde farklı sayfalar arasında geçiş yapmayı sağlayan bir menüdür. Genellikle web sitesinin yan veya üst kısmında bulunur ve kullanıcılara sayfa içeriği arasında hızlı bir şekilde gezinme imkanı sağlar.

HTML Yapısı

Öncelikle, dikey sekme menüsünü HTML içerisinde oluşturmalıyız. Her bir sekme için bir başlık ve ona bağlı olarak farklı içeriklerin bulunduğu sekme bölmeleri oluşturacağız.

[CODE lang="html" title="html"]<div class="dikey-sekme-menu">
<button class="sekme-basligi" onclick="acSekme(event, 'sekme1')">Sekme 1</button>
<button class="sekme-basligi" onclick="acSekme(event, 'sekme2')">Sekme 2</button>
<button class="sekme-basligi" 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 başlığı 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 başlığına karşılık gelen bir id değerine sahiptir.

CSS Stilleri

Sekme menüsünün görünümünü düzenlemek için CSS kullanacağız. Bu şekilde menünün görünümünü istediğimiz gibi özelleştirebileceğiz.

[CODE lang="css" title="css"].dikey-sekme-menu {
overflow: hidden;
border-right: 1px solid #ccc;
}

.sekme-basligi {
background-color: #f2f2f2;
color: black;
padding: 10px 15px;
width: 100%;
border: none;
text-#cccn: left;
cursor: pointer;
}

.sekme-basl#f2f2f2er {
background-color: #ddd;
}

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

.sekme-icerik:first-child {
display: block;
}
[/CODE]

Yukarıdaki CSS kod#ddd, sekme menüsünün 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 başlığına 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, sekmeBasligi;

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

sekmeBasligi = document.getElementsByClassName("sekme-basligi");
for (i = 0; i < sekmeBasligi.length; i++) {
sekmeBasligi.className = sekmeBasligi.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ı (sekmeAdi) ile çağrılır. Her bir sekme başlığına 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 başlığının üzerine bir active sınıfı eklenir.

Bu makalede, CSS ve JavaScript ile dikey sekme menüsünün 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 kolayca görebileceği ve erişebileceği bir dikey sekme menüsü oluşturduk.

Umarım bu rehber, dikey sekme menüsü oluşturma konusunda size faydalı olmuştur. Başka sorularınız varsa, çekinmeden sormaktan çekinmeyin!

İyi tasarımlar ve kodlamalar dilerim!