Konu Başlıklarına Git
Konu Başlıkları
Yükleniyor...

Kullanıcı Deneyimini Zirveye Taşıyın: CSS ile Yapışkan (Sticky) Header Yapımı

CSS ile Sticky Header Nasıl Yapılır? | Adım Adım Sabit Menü Rehberi

Modern web tasarımında kullanıcı deneyimi her şey demektir. Ziyaretçilerinizin sitenizde aradıklarını kolayca bulabilmeleri, markanızla olan etkileşimlerini doğrudan etkiler. Peki, bir kullanıcı sayfanızda aşağı doğru kaydırmaya başladığında en önemli navigasyon aracınız olan menünüz gözden kayboluyorsa ne olur? İşte bu noktada "sticky" yani "yapışkan" header devreye giriyor.

Yapışkan header, sayfa kaydırılsa bile ekranın üst kısmında sabit kalarak kullanıcının menüye, arama çubuğuna veya önemli linklere her an ulaşmasını sağlar. Bu sadece bir kolaylık değil, aynı zamanda sitenize profesyonel bir hava katan önemli bir tasarım detayıdır.

Bu yazıda, kendi web sitenizin CSS kodlarında yapacağınız basit ama etkili değişikliklerle üst menünüzü nasıl sabitleyebileceğinizi adım adım anlatacağız. Hazırsanız, başlayalım!

Kullanıcı Deneyimini Zirveye Taşıyın: CSS ile Yapışkan (Sticky) Header Yapımı

Giriş Yazısı

Modern web tasarımında kullanıcı deneyimi her şey demektir. Ziyaretçilerinizin sitenizde aradıklarını kolayca bulabilmeleri, markanızla olan etkileşimlerini doğrudan etkiler. Peki, bir kullanıcı sayfanızda aşağı doğru kaydırmaya başladığında en önemli navigasyon aracınız olan menünüz gözden kayboluyorsa ne olur? İşte bu noktada "sticky" yani "yapışkan" header devreye giriyor.

Yapışkan header, sayfa kaydırılsa bile ekranın üst kısmında sabit kalarak kullanıcının menüye, arama çubuğuna veya önemli linklere her an ulaşmasını sağlar. Bu sadece bir kolaylık değil, aynı zamanda sitenize profesyonel bir hava katan önemli bir tasarım detayıdır.

Bu yazıda, kendi web sitenizin CSS kodlarında yapacağınız basit ama etkili değişikliklerle üst menünüzü nasıl sabitleyebileceğinizi adım adım anlatacağız. Hazırsanız, başlayalım!

Sorun: Gözden Kaybolan Menüler

Standart bir web sitesinde, kullanıcı sayfayı aşağı kaydırdığında üst bölümdeki logo ve menü de ekranın dışına çıkar. Kullanıcının başka bir sayfaya geçmek veya ana sayfaya dönmek istemesi durumunda, sayfanın en üstüne geri dönmesi gerekir. Bu durum, özellikle uzun sayfalarda veya blog yazılarında can sıkıcı olabilir ve kullanıcıyı siteden uzaklaştırabilir.

Çözüm: Adım Adım CSS ile Header Sabitleme

Bu sorunu çözmek için CSS'in gücünden faydalanacağız. Aşağıdaki adımları takip ederek header bölümünüzü kolayca sabitleyebilirsiniz.

Adım 1: Header'ı Ekrana Sabitlemek

İlk olarak, header'ımızı içeren ana bölümü (#bolum-ust) ekrana sabitlememiz gerekiyor. Bunu CSS'in position: fixed; özelliği ile yapıyoruz. Bu özellik, bir elementi sayfa akışından çıkarır ve onu tarayıcı penceresine göre konumlandırır.

html.banner-ust-dolu #bolum-ust, html.banner-ust-bos #bolum-ust { position: fixed; /* Elementi ekrana sabitler */ top: 0; /* Ekranın en üstüne hizalar */ left: 0; /* Ekranın en soluna hizalar */ width: 100%; /* Tüm ekran genişliğini kaplamasını sağlar */ z-index: 1000; /* Diğer tüm elementlerin üzerinde kalmasını sağlar */ }

Adım 2: İçeriğin Header Altında Kalmasını Önlemek

Header'ı sabitlediğimizde, sayfanın geri kalan içeriği üste kayacak ve sabit menünün altına gizlenecektir. Bunu önlemek için, <body> etiketine, header'ımızın yüksekliği kadar bir üst boşluk (padding-top) vermeliyiz. Kodumuzdaki header yüksekliği 90px olduğu için bu değeri kullanacağız.

body { padding-top: 90px; /* Sabit header'ın yüksekliği kadar boşluk bırakır */ }

Adım 3: Okunabilirlik İçin Arka Plan Rengi Eklemek

Son olarak en önemli adımlardan biri: okunabilirlik. Eğer sabit header'ınızın bir arka plan rengi yoksa, sayfa kaydırıldığında alttaki yazılar ve görseller menü linkleriyle iç içe geçerek kötü bir görüntü oluşturur. Bunu çözmek için header'ımıza opak bir arka plan rengi ekliyoruz.

html.banner-ust-dolu #bolum-ust, html.banner-ust-bos #bolum-ust { background-color: @bannerUstBosUstSeritZeminRengi; /* Temanın siyah rengini arka plan yapar */ /* 1. Adımdaki diğer kurallar... */ position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; }

Sonuç: Tam ve Çalışır Kod

Tüm adımları birleştirdiğimizde, CSS dosyanızdaki ilgili bölümlerin son hali aşağıdaki gibi olmalıdır:

/* Genel Özellikler ------------------------------------------------------------------------------*/ body { background-color: @bodyZeminRengi; color: @bodyYaziRengi; font-size: 1.1rem; letter-spacing: 1px; .fontAilesi; .fontLight; padding-top: 90px; /* YENİ EKLENDİ */ } /* Üst ------------------------------------------------------------------------------*/ html.banner-ust-dolu #bolum-ust { background-color: @bannerUstBosUstSeritZeminRengi; /* DEĞİŞTİRİLDİ */ position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; } html.banner-ust-bos #bolum-ust { background-color: @bannerUstBosUstSeritZeminRengi; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; }

İşte bu kadar! Bu basit dokunuşlarla artık web siteniz, ziyaretçilerinize çok daha akıcı ve profesyonel bir gezinme deneyimi sunuyor.

Devamını okuyun: Bu CSS kodlarının hangi HTML yapılarını hedeflediğini öğrenmek için bir sonraki yazımızı okuyun: Sticky Header'ın Temeli: Sitenizin HTML Yapısını Anlama Rehberi





Sticky Header'ın Temeli: Sitenizin HTML Yapısını Anlama Rehberi

Giriş Yazısı

Bir önceki yazımızda, birkaç satır CSS koduyla sitemizin üst menüsünü (header) ekrana nasıl sabitleyeceğimizi öğrendik: CSS ile Yapışkan (Sticky) Header Yapımı. Sonuç harika oldu! Peki hiç merak ettiniz mi, yazdığımız o CSS kodları hangi elementi sabitleyeceğini, hangisine arka plan rengi vereceğini nereden biliyor?

Cevap, web sayfalarının temel taşı olan HTML'de gizli. Eğer CSS bir binanın boyası ve dekorasyonu ise, HTML o binanın iskeleti, yani temelidir.

Bu devam yazısında, bir önceki derste kullandığımız CSS kodlarının hedef aldığı HTML yapısını inceleyeceğiz. Sitenizin "iskeletini" anlamak, gelecekte yapmak isteyeceğiniz tüm tasarımsal değişiklikler için size inanılmaz bir güç ve esneklik katacaktır.

HTML Nedir ve Neden Önemlidir?

HTML (HyperText Markup Language), bir web sayfasının içeriğini ve yapısını tanımlayan standart bir dildir. Gördüğünüz her başlık, paragraf, resim ve menü, birer HTML etiketiyle oluşturulur.

CSS kodlarımız, bu etiketleri hedef alarak çalışır. Örneğin, CSS'te h1 { color: blue; } yazdığımızda, tarayıcıya "HTML'de <h1> etiketiyle işaretlenmiş tüm başlıkları bul ve onları mavi yap" demiş oluruz. İşte bu yüzden HTML yapısını anlamak, CSS'i doğru kullanmanın ilk adımıdır.

Header'ımızın HTML İskeletini İnceliyoruz

Önceki yazıda kullandığımız CSS seçicilerini (#bolum-ust, body vb.) hatırlayalım. Şimdi bu seçicilerin hangi HTML elementlerine karşılık geldiğine bakalım. Sitenizin HTML'i tam olarak böyle olmasa da, yapı temel olarak aşağıdaki gibidir:

<!-- <body> ETİKETİ TÜM GÖRÜNÜR İÇERİĞİ SARAR --> <body> <!-- ADIM 1: CSS ile SABİTLEDİĞİMİZ ANA BÖLÜM --> <div id="bolum-ust"> <!-- Bu bölümün içinde logo ve menüyü taşıyan bir şerit bulunur --> <div id="bolum-ust-serit"> <!-- LOGO BURADA YER ALIR (Genellikle bir <img> etiketidir) --> <div id="logo"> <a href="/"> <img src="logo.png" alt="Site Logosu"> </a> </div> <!-- MENÜ MODÜLÜMÜZ --> <div class="modul-menu"> <!-- Menüler genellikle sıralanmamış listelerle (<ul>) yapılır --> <ul> <!-- Her bir menü elemanı bir liste öğesidir (<li>) --> <li> <!-- Menü linki bir bağlantı etiketidir (<a>) --> <a href="/ana-sayfa">Ana Sayfa</a> </li> <li> <a href="/hakkimizda">Hakkımızda</a> </li> </ul> </div> </div> </div> <!-- ADIM 2: padding-top EKLEDİĞİMİZ DİĞER İÇERİKLER --> <div id="bolum-orta"> <!-- Sayfanızın geri kalan tüm içeriği burada yer alır --> <h1>Sayfa Başlığı</h1> <p>Bu bir paragraftır...</p> </div> </body>

Bu Yapı Ne Anlama Geliyor?

  • <div id="bolum-ust">: Bu, bizim ana taşıyıcımız. CSS'te position: fixed verdiğimiz bölüm tam olarak burası. ID'ler (# ile başlar) bir sayfada benzersizdir, bu yüzden CSS'in tam olarak doğru bölümü hedeflediğinden emin oluruz.
  • <div id="bolum-ust-serit">: Sabitlenen ana bölümün içindeki içerik şeridi. Yüksekliğinin 90px olduğunu ve body'e bu yüzden padding-top: 90px verdiğimizi hatırlayın.
  • <div class="modul-menu">: Menü navigasyonunu içeren özel kutu. Class'lar (. ile başlar) bir sayfada birden çok kez kullanılabilir.
  • <ul>, <li>, <a>: Bu üçlü, web'deki neredeyse tüm menülerin temelidir. CSS ile li a:hover yazdığımızda, "fareyle üzerine gelinen menü linklerini" hedeflediğimizi tarayıcı bu yapı sayesinde anlar.

Kendi Sitenizi Keşfedin: Tarayıcı Geliştirici Araçları

Bu yapıyı kendi sitenizde canlı olarak görmek ister misiniz? Tarayıcıların "Geliştirici Araçları" tam olarak bu işe yarar.

  1. Sitenizdeyken, header bölümünün üzerine gelin ve sağ tıklayıp "İncele" (Inspect) seçeneğine tıklayın. Alternatif olarak klavyenizden F12 tuşuna basabilirsiniz.
  2. Ekranın bir kenarında yeni bir panel açılacaktır. Bu panelin bir tarafında sayfanızın HTML yapısını, diğer tarafında ise o HTML elementine uygulanan CSS kurallarını göreceksiniz.
  3. Paneldeki HTML kodlarının üzerine farenizle geldikçe, sayfanızda ilgili bölümün vurgulandığını göreceksiniz. Bu, #bolum-ust gibi ID'lerin sitenizde tam olarak nereye karşılık geldiğini anlamanın en iyi yoludur.

Sonuç

Artık sadece bir CSS kopyalayıp yapıştıran değil, aynı zamanda o CSS'in sitenizin hangi temel yapı taşlarını (HTML) etkilediğini bilen birisiniz. Bu bilgi, ileride "menüdeki yazı tipini değiştirmek" veya "logonun boyutunu ayarlamak" gibi daha karmaşık görünen işleri bile kolayca yapabilmenizi sağlayacaktır.

Unutmayın; HTML iskelettir, CSS ise kıyafet. İyi bir tasarımcı, her ikisine de nasıl hükmedeceğini bilir.

RADIOFRAMELAB | Blog Öneri ve Görüş Formu

✍️ RADIOFRAMELAB • Radyo Çerçeve Laboratuvarı • Blog - Fikirlerinizi Paylaşın!

"Blogumuzu birlikte şekillendirelim!
Hangi konuların yer almasını veya yer almamasını istediğinizi bize bildirin."