PricingLoginStart free
Tailwind CSS Academy · Ders

Duyarlı Gezinme Çubuğu Oluşturma

Gizli ve duyarlı flex yardımcı sınıflarını kullanarak logolu, bağlantılı ve CTA'lı yatay bir gezinme çubuğu oluşturun; mobilde çubuk hamburger menüsüne daralsın.

1. ders / 413 adım

Duyarlı Gezinme Çubuğu Oluşturma, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

Gezinme Çubuğunun Anatomisi

Bir gezinme çubuğu (navbar) sayfanın en üstünde yer alır ve genellikle solda bir logo, ortada veya sağda gezinme bağlantıları, en sağda da bir eylem çağrısı düğmesi içerir. Mobilde, yer kazanmak için bağlantılar hamburger menüsünde daraltılır.

Gezinme çubuğunun gövdesi, bu üç bölgeyi yatay olarak dağıtmak için flex items-center justify-between kullanır; rahat bir iç dolgu için de px-6 py-4 eklenir.

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
  <!-- Logo -->
  <a href="/" class="text-xl font-bold text-blue-600">Brand</a>
  <!-- Nav links (hidden on mobile) -->
  <div class="hidden md:flex items-center gap-6">...</div>
  <!-- CTA -->
  <button class="hidden md:block px-4 py-2 bg-blue-600 text-white rounded-lg">Sign Up</button>
</nav>

Logo ve Marka Alanı

Logo alanı genellikle bir SVG logosunu veya metin tabanlı bir marka adını saran bir bağlantı etiketidir. Simge ile metni birleştiriyorsanız dikey olarak hizalanmaları için flex items-center gap-2 kullanın.

Logo yazı tipini kalın tutun ve markanızın ana rengini kullanın: font-bold text-xl text-blue-600. focus:outline-none focus-visible:ring-2 odak stilini kullanarak bağlantının klavyeyle odaklanabilmesini sağlayın.

<a href="/" class="flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded">
  <svg class="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
  </svg>
  <span class="text-xl font-bold text-gray-900">Launchpad</span>
</a>

Masaüstü Gezinme Bağlantıları

Masaüstü gezinme bağlantıları hidden md:flex items-center gap-6 sarmalayıcısının içinde yer alır; küçük ekranlarda görünmez, orta ve daha büyük ekranlarda ise esnek bir satır olarak görüntülenir. Her bağlantı, üzerine gelindiğinde koyulaşan zarif bir varsayılan stil için text-sm font-medium text-gray-600 hover:text-gray-900 kullanır.

Üzerine gelindiğinde rengin yumuşak biçimde değişmesi için transition-colors duration-150 ekleyin; geçerli sayfayı belirtmek için farklı bir metin rengi veya alt çizgi kullanın.

<div class="hidden md:flex items-center gap-6">
  <a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Features</a>
  <a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Pricing</a>
  <a href="/blog" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Blog</a>
  <a href="/about" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">About</a>
</div>

Masaüstü CTA ve Giriş Düğmesi

Gezinme çubuğunun sağ tarafında genellikle soluk bir Giriş yap bağlantısı ve dolu bir Kayıt ol düğmesi bulunur. Bunları hidden md:flex items-center gap-3 içine sarmak, mobilde gizli kalmalarını ve masaüstünde hizalanmalarını sağlar.

Her iki düğmeyi birlikte kullanmak net bir hiyerarşi oluşturur: geri dönen kullanıcılar için soluk bağlantı, yeni kullanıcı kazanımı içinse dolu düğme kullanılır.

<div class="hidden md:flex items-center gap-3">
  <a href="/login" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Sign in
  </a>
  <a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
    Get Started
  </a>
</div>

Hamburger Menü Düğmesi

Mobilde, masaüstü bağlantılarının yerini bir hamburger düğmesi alır. md:hidden ile düğmeyi yalnızca küçük ekranlarda gösterin ve erişilebilir bir aria-label="Open menu" özniteliği ekleyin.

Düğme, SVG kullanarak üç yatay çizgi (klasik hamburger simgesi) oluşturur. Tıklandığında JavaScript bir sınıfı değiştirerek mobil menü panelini görünür hâle getirir. Rahat bir dokunma alanı için düğmenin kendisinde p-2 text-gray-600 hover:bg-gray-100 rounded-md kullanılır.

<button
  id="menu-btn"
  aria-label="Open menu"
  class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-md"
  onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
  <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
  </svg>
</button>

Mobil Menü Paneli

Mobil menü, hamburger düğmesine basıldığında gezinme çubuğunun altında görünen tam genişlikte bir paneldir. hidden sınıfıyla varsayılan olarak gizlenir; düğmeye tıklandığında JavaScript bu sınıfı kaldırır.

Bağlantıları flex flex-col gap-1 px-4 pb-4 ile dikey olarak sıralayın ve her bağlantıya büyük, başparmakla kolayca dokunulabilen bir hedef alanı sağlamak için block py-2 text-base font-medium verin.

<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100">
  <div class="flex flex-col gap-1 px-4 pb-4 pt-2">
    <a href="/features" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Features</a>
    <a href="/pricing" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Pricing</a>
    <a href="/blog" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Blog</a>
    <a href="/about" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">About</a>
    <a href="/signup" class="mt-2 block py-2 px-4 text-center text-base font-semibold text-white bg-blue-600 rounded-lg">
      Get Started
    </a>
  </div>
</div>

Tam Gezinme Çubuğunu Birleştirme

Tüm parçaları tek bir <nav> öğesinde birleştirin. Yapı şöyledir: gölgeli sarmalayıcı gezinme çubuğu; bunun içinde logo, masaüstü bağlantıları ve masaüstü CTA'sından oluşan üç bölgeli, maksimum genişlikte bir kapsayıcı; kapsayıcının dışındaysa tam genişlikte mobil menü paneli.

İçteki max-w-7xl mx-auto sarmalayıcısı, arka planın uçtan uca uzanmasına izin verirken gezinme çubuğu içeriğinin büyük monitörlerde gereğinden fazla genişlemesini önler.

<nav class="bg-white shadow-sm">
  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="/" class="text-xl font-bold text-blue-600">Brand</a>
    <div class="hidden md:flex items-center gap-6">
      <a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900">Features</a>
      <a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900">Pricing</a>
    </div>
    <div class="hidden md:flex items-center gap-3">
      <a href="/login" class="text-sm text-gray-600">Sign in</a>
      <a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg">Get Started</a>
    </div>
    <button class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-md"
            onclick="document.getElementById('mob').classList.toggle('hidden')">
      <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>
  </div>
  <div id="mob" class="hidden md:hidden px-6 pb-4 flex flex-col gap-1">
    <a href="/features" class="py-2 text-base font-medium text-gray-700">Features</a>
    <a href="/pricing" class="py-2 text-base font-medium text-gray-700">Pricing</a>
    <a href="/signup" class="mt-2 py-2 px-4 text-center text-base font-semibold text-white bg-blue-600 rounded-lg">Get Started</a>
  </div>
</nav>

Etkin Bağlantı Göstergesi

Etkin bağlantı göstergesi, kullanıcıların şu anda hangi sayfada olduklarını görmesini sağlar. Yaygın bir yöntem, alt kenarlık veya metin rengi değişikliği kullanmaktır. Etkin bağlantıya text-blue-600 border-b-2 border-blue-600 pb-0.5 uygulayarak gri bağlantılar arasından öne çıkmasını sağlayın.

Sunucu tarafından oluşturulan uygulamalarda etkin sınıfları koşullu olarak sunucuda ekleyin. JS çerçevelerinde geçerli rotayı bağlantının href değeriyle karşılaştırıp sınıfları program aracılığıyla uygulayın.

<div class="hidden md:flex items-center gap-6">
  <!-- Active link -->
  <a href="/features"
     class="text-sm font-medium text-blue-600 border-b-2 border-blue-600 pb-0.5">
    Features
  </a>
  <!-- Inactive links -->
  <a href="/pricing"
     class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Pricing
  </a>
  <a href="/blog"
     class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Blog
  </a>
</div>

Arama Girdili Gezinme Çubuğu

Gezinme çubuğuna bir arama alanı eklemek, içerik açısından yoğun sitelerde yaygın bir gereksinimdir. Arama girdisini flex-1 max-w-md mx-8 kullanarak gezinme çubuğunun ortasına yerleştirin; böylece genişliği esnek olurken orantısını korur.

Odak halkasına sahip temiz bir arama çubuğu oluşturmak için girdiyi w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 ile biçimlendirin.

<div class="flex-1 max-w-md mx-8">
  <div class="relative">
    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
         fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/>
    </svg>
    <input
      type="search"
      placeholder="Search..."
      class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full
             bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
  </div>
</div>

Açılır Gezinme Öğesi

Bir açılır gezinme öğesi, üzerine gelindiğinde veya tıklandığında bir alt menü gösterir. Tamamen CSS ile çalışan bir üzerine gelme açılır menüsü uygulamak için üst bağlantıda group yardımcı sınıfını, başlangıçta hidden olan alt menüdeyse group-hover:block kullanın.

Açılır menüyü üst bağlantının hemen altına yerleştirmek için absolute top-full left-0 mt-1 ile konumlandırın. Uygun bir panel görünümü vermek için min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 ekleyin.

<div class="relative group">
  <button class="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900">
    Products
    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
    </svg>
  </button>
  <div class="hidden group-hover:block absolute top-full left-0 mt-1 min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 py-1">
    <a href="/analytics" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Analytics</a>
    <a href="/reporting" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Reporting</a>
    <a href="/export" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Export</a>
  </div>
</div>

Koyu Gezinme Çubuğu Görünümü

Koyu gezinme çubuğu, bg-gray-900 gibi koyu bir arka planı açık renkli metinle kullanır. Bağlantılar için text-gray-600 yerine text-gray-300, üzerine gelme durumları için hover:text-white kullanın; koyu arka planda öne çıkması gerektiğinden düğmeyi bg-blue-500 olarak değiştirin.

Koyu gezinme çubukları, geliştirici araçlarında, SaaS panolarında ve teknik kitleyi hedefleyen tüm ürünlerde popülerdir.

<nav class="bg-gray-900 shadow-lg">
  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="/" class="text-xl font-bold text-white">DevTool</a>
    <div class="hidden md:flex items-center gap-6">
      <a href="/docs" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Docs</a>
      <a href="/api" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">API</a>
      <a href="/pricing" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Pricing</a>
    </div>
    <a href="/dashboard" class="px-4 py-2 text-sm font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-400">
      Dashboard
    </a>
  </div>
</nav>

Hızlı Kontrol

Bu dersteki Tailwind CSS Uzmanlığı kavramlarını anlayıp anlamadığınızı test edin.

İnteraktif derste cevapla

Ders Özeti

Bu derste şunları öğrendiniz: üç bölgeli esnek düzene (logo, bağlantılar, CTA) sahip duyarlı gezinme çubuğu yapısı; JavaScript ile değiştirilen ve masaüstünde md:hidden kullanılarak gizlenen hamburger düğmesi ve mobil menü paneli; bağlantıların mobilde daraltılıp daha büyük ekranlarda genişlemesini sağlayan hidden md:flex ile denetlenen masaüstü bağlantı görünürlüğü. Sırada gezinmeyi sabit ve yapışkan hâle getireceğiz.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
30
Dersler
120
Ücretsiz öğrenmeye başlaTüm kursu görüntüle

Sıkça Sorulan Sorular

“Duyarlı Gezinme Çubuğu Oluşturma” dersi ücretsiz mi?

Evet — “Duyarlı Gezinme Çubuğu Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

“Duyarlı Gezinme Çubuğu Oluşturma” dersinde ne öğreneceğim?

Gizli ve duyarlı flex yardımcı sınıflarını kullanarak logolu, bağlantılı ve CTA'lı yatay bir gezinme çubuğu oluşturun; mobilde çubuk hamburger menüsüne daralsın. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Duyarlı Gezinme Çubuğu Oluşturma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Duyarlı Gezinme Çubuğu Oluşturma
  2. Yapışkan ve Sabit Gezinme
  3. Dikey Kenar Çubuğu Düzeni
  4. Daraltılabilir Mobil Kenar Çubuğu
← Tailwind CSS Academy Sayfasına Dön