Mobil uyumlu üç sütunlu flexbox
Table of Contents
Web tasarımında modern, etkileşimli ve kullanıcı dostu öğeler oluşturmanın önemi her geçen gün artmaktadır. Bu blog yazısında, kullanıcıların etkileşim kurabileceği dinamik bir içerik gösterim sistemi olan üç sütunlu, içerikleri sekmelerde gizlenmiş flexbox bileşenini adım adım inşa etmeyi ve bu süreçte kullanılan HTML, CSS ve JavaScript tekniklerini açıklamayı hedefliyoruz. Ayrıca geliştirdiğimiz üç sütunlu flexbox’ı indirerek kendi projenizde özelleştirilebilecek şekilde kullanabilirsiniz.
Giriş ve yaklaşım
Geliştirdiğimiz kod parçacıklarında ele alınan yapı ve yaklaşım, kullanıcıların farklı kategoriler veya sekmeler arasında gezinmesine olanak tanıyan, interaktif bir “üç sütunlu sekmeli içerik görüntüleme” yaklaşımını temsil eder. Bu yaklaşım, modern web tasarımlarında sıkça kullanılan bir özelliktir ve kullanıcı deneyimini artırarak, içeriğin daha düzenli ve erişilebilir olmasını sağlar. İşte bu yapıda ele alınan temel unsurlar ve yaklaşım:
CSS Flexbox modeli (display: flex;), sekmelerin esnek bir şekilde düzenlenmesini ve farklı ekran boyutlarına uyum sağlamasını sağlar. Bu, web sayfasının duyarlı ve mobil dostu olmasına katkıda bulunur.
Sekmeler, kullanıcıların tıklamasına yanıt verecek şekilde tasarlanmıştır. Her sekme, ilgili içeriği göstermek için bir tetikleyici görevi görür. Bu etkileşim, JavaScript ile yönetilir.
JavaScript, kullanıcı tıklamalarını dinler ve tıklanan sekmenin bağlantılı olduğu içeriği gösterirken diğerlerini gizler. Bu dinamik içerik yönetimi, sayfanın yeniden yüklenmesine gerek kalmadan içerik arasında geçiş yapılmasını sağlar.
CSS ile yapılan hover efektleri (örneğin, box-shadow kullanımı), kullanıcılara hangi sekmenin aktif olduğuna dair görsel bir geri bildirim sağlar. Bu, kullanıcı deneyimini zenginleştirir.
HTML yapısında semantik elementler kullanılarak (örneğin, <div>, <h2>, <p>), içeriğin anlamı ve yapısı net bir şekilde ifade edilir. Bu, arama motorları ve ekran okuyucuları için içeriğin daha erişilebilir olmasını sağlar.
Bu yapı ve yaklaşım, kullanıcıların ihtiyaç duydukları bilgilere kolayca erişmelerini sağlar ve web geliştiricilere, içeriklerini düzenli, erişilebilir ve estetik açıdan hoş bir biçimde sunma imkânı verir.
Kod parçacığı çıktısı
Pazar Analizi
Bu sekme, mevcut pazar koşullarının derinlemesine analizini ve trendleri sunar. Pazarın mevcut durumunu, büyüme potansiyelini ve önemli oyuncuları kapsar. Analizler, stratejik kararlar almanız için veri tabanlı içgörüler sağlar.
Emlak Geliştirme
Emlak geliştirme ile ilgili güncel projeler, pazar fırsatları ve geliştirme stratejileri hakkında bilgi sunar. Bu sekmede, sürdürülebilirlik, maliyet etkinliği ve yenilikçi tasarım gibi anahtar konulara değinilir.
Yatırım Fırsatları
Potansiyel yatırım fırsatlarını ve finansal getirileri değerlendiren analizleri içerir. Risk yönetimi, portföy çeşitlendirme ve piyasa tahminleri ile yatırım stratejileri sunulur.
Teknolojik Yenilikler
Bu alan, endüstriyi dönüştüren son teknolojik gelişmeleri ve yenilikleri kapsar. Yapay zeka, makine öğrenmesi, blockchain ve diğer ileri teknolojiler hakkında bilgiler içerir.
Ödüller ve Başarılar
Şirketinizin veya ekibinizin kazandığı ödüller ve başarı hikayelerini sergiler. Bu başarıların ardındaki hikayeler, ekip çalışmasının önemi ve yenilikçi yaklaşımlar vurgulanır.
Yaratıcı Fikirler
Yenilikçi projeler, yaratıcı çözümler ve endüstriyi ileriye taşıyan fikirler hakkında içerik sunar. Bu sekme, ilham almak ve yeni projeler üretmek için bir platform olarak hizmet eder.
HTML Yapısı
Projemiz, kullanıcıların farklı kategoriler arasında kolayca geçiş yapabilmesi için tasarlanmış bir dizi sekmeden oluşuyor. Bu sekmeler, örneğimizde ‘Pazar Analizi’, ‘Emlak Geliştirme’, ‘Yatırım Fırsatları’, ‘Teknolojik Yenilikler’, ‘Ödüller ve Başarılar’, ‘Yaratıcı Fikirler’ gibi başlıkları içeriyor. Her sekme, ilgili içeriği göstermek için tıklanabilir bir yapıdadır.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tablı İçerik Görüntüleme</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
</head>
<body>
<div id="flexbox">
<div id="mudos-1"><span class="icon">📈</span> Pazar Analizi</div>
<div id="mudos-2"><span class="icon">🏠</span> Emlak Geliştirme</div>
<div id="mudos-3"><span class="icon">💸</span> Yatırım Fırsatları</div>
<div id="mudos-4"><span class="icon">💻</span> Teknolojik Yenilikler</div>
<div id="mudos-5"><span class="icon">🏆</span> Ödüller ve Başarılar</div>
<div id="mudos-6"><span class="icon">💡</span> Yaratıcı Fikirler</div>
</div>
<div class="content" id="content-mudos-1">
<h2>Pazar Analizi</h2>
<p>Bu sekme, mevcut pazar koşullarının derinlemesine analizini ve trendleri sunar. Pazarın mevcut durumunu,
büyüme potansiyelini ve önemli oyuncuları kapsar. Analizler, stratejik kararlar almanız için veri tabanlı
içgörüler sağlar.</p>
</div>
<div class="content" id="content-mudos-2">
<h2>Emlak Geliştirme</h2>
<p>Emlak geliştirme ile ilgili güncel projeler, pazar fırsatları ve geliştirme stratejileri hakkında bilgi
sunar. Bu sekmede, sürdürülebilirlik, maliyet etkinliği ve yenilikçi tasarım gibi anahtar konulara
değinilir.</p>
</div>
<div class="content" id="content-mudos-3">
<h2>Yatırım Fırsatları</h2>
<p>Potansiyel yatırım fırsatlarını ve finansal getirileri değerlendiren analizleri içerir. Risk yönetimi,
portföy çeşitlendirme ve piyasa tahminleri ile yatırım stratejileri sunulur.</p>
</div>
<div class="content" id="content-mudos-4">
<h2>Teknolojik Yenilikler</h2>
<p>Bu alan, endüstriyi dönüştüren son teknolojik gelişmeleri ve yenilikleri kapsar. Yapay zeka, makine
öğrenmesi, blockchain ve diğer ileri teknolojiler hakkında bilgiler içerir.</p>
</div>
<div class="content" id="content-mudos-5">
<h2>Ödüller ve Başarılar</h2>
<p>Şirketinizin veya ekibinizin kazandığı ödüller ve başarı hikayelerini sergiler. Bu başarıların ardındaki
hikayeler, ekip çalışmasının önemi ve yenilikçi yaklaşımlar vurgulanır.</p>
</div>
<div class="content" id="content-mudos-6">
<h2>Yaratıcı Fikirler</h2>
<p>Yenilikçi projeler, yaratıcı çözümler ve endüstriyi ileriye taşıyan fikirler hakkında içerik sunar. Bu sekme,
ilham almak ve yeni projeler üretmek için bir platform olarak hizmet eder.</p>
</div>
</body>
</html>
Bu yapı, kullanıcı dostu ve sezgisel bir deneyim sağlar. Her div elementi, bir sekme olarak işlev görür ve içerisinde bir ikon ile başlık barındırır. İçerik ise başka bir div içinde, başlıklar ve paragraflar şeklinde saklanır.
CSS Stillemesi
Kullanıcı arayüzünün görsel cazibesini artırmak için CSS kullanıyoruz. #flexbox id’sine sahip ana divimiz, display: flex; özelliği sayesinde içeriklerini yatay bir şekilde ve esnek bir yapıda sıralar. Her bir sekme için belirlediğimiz stiller, sekmelerin görsel olarak çekici ve tıklanabilir olmasını sağlar.
#flexbox {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-around;
}
#flexbox > div {
border: 1px solid #ddd;
background-color: #f9f9f9;
width: calc(33.3333% - 15px); /* Her bir sekme için genişlik */
height: 100px; /* Sekme yüksekliği */
margin-bottom: 10px; /* Sekmeler arası alt boşluk */
display: flex;
align-items: center; /* İçerikleri dikey olarak ortala */
justify-content: center; /* İçerikleri yatay olarak ortala */
box-sizing: border-box;
border-radius: 10px; /* Kenarları yuvarlat */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
transition: all 0.3s ease; /* Yumuşak geçiş efekti */
cursor: pointer; /* Fare imlecini tıklanabilir olarak değiştir */
}
#flexbox > div:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Fare ile üzerine gelindiğinde gölge efektini artır */
}
#flexbox > div .icon {
margin-right: 10px; /* İkon ve metin arasında boşluk */
font-size: 24px; /* İkon boyutu */
}
#flexbox > div, .content {
font-family: 'Manrope', sans-serif; /* Yazı tipi */
color: #333; /* Metin rengi */
font-size: 14px; /* Metin boyutu */
}
.content {
display: none; /* İçerik bölümlerini varsayılan olarak gizle */
margin: 10px; /* İçerik bölümleri etrafında boşluk */
padding: 10px; /* İçerik bölümleri içindeki boşluk */
border: 1px solid #ddd; /* İçerik bölümleri için kenarlık */
border-radius: 10px; /* İçerik bölümleri kenarlarını yuvarlat */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* İçerik bölümleri için hafif gölge efekti */
}
/* Pazar Analizi içeriğini varsayılan olarak göster */
#content-mudos-1 {
display: block;
}
Ayrıca, sekmeler üzerine gelindiğinde bir gölge efekti ekleyerek, kullanıcılara hangi sekmenin aktif olduğunu görsel bir geri bildirimle bildiriyoruz.
JavaScript Dinamikliği
Bu yapıda en önemli rolü oynayan JavaScript, kullanıcı etkileşimini dinamik bir şekilde işleyerek, tıklanan sekmenin içeriğini gösterir ve diğerlerini gizler.
document.addEventListener("DOMContentLoaded", function () {
// Sekmeleri seç
var tabs = document.querySelectorAll("#flexbox > div");
tabs.forEach(function (tab) {
tab.addEventListener("click", function () {
// Tıklanan sekmenin karşılık gelen içerik ID'sini oluştur
var contentId = "content-" + this.id;
// İlgili içeriği seç
var content = document.getElementById(contentId);
// Tüm içerikleri gizle
var allContents = document.querySelectorAll(".content");
allContents.forEach(function (cn) {
cn.style.display = "none";
});
// Yalnızca tıklanan sekmenin içeriğini göster
content.style.display = "block";
});
});
});
Bu kod, sayfa yüklendiğinde her bir sekmenin tıklanabilir olduğunu belirler ve ilgili içeriği göstermek için display özelliğini block olarak ayarlar.
Sonuç
Bu blog yazısı, “Tablı İçerik Görüntüleme” yapısının nasıl oluşturulacağını adım adım açıklamaktadır. HTML, CSS ve JavaScript’in birleşimi, kullanıcıların kolayca gezinebileceği, görsel olarak çekici ve etkileşimli bir web deneyimi sunar. Bu tür dinamik içerik yönetim sistemleri, modern web tasarımının ayrılmaz bir parçasıdır ve kullanıcı deneyimini önemli ölçüde iyileştirir.