Tiesto

Tiesto

WFN Üye
Konular
589
Mesajlar
589
Çözüm
0
Ticaret Puanı
0
Üyelik
23 Gün
Konum
Antalya
Web Sitesi
Var
Alanı
Domain Uzmanı
1/1
Konu sahibi
İçeriği küçük ekranlarda açılır hâle getirmek için menüyü HTML içinde bir kontrol kutusuyla oluşturup, CSS’te bu kutunun seçili durumuna göre menüyü görünür yapabilirsiniz. Aşağıdaki örnekte JavaScript kullanılmaz; kullanıcı menü düğmesine dokunduğunda bağlantılar açılır, tekrar dokunduğunda kapanır. Masaüstünde ise menü normal yatay bağlantılar olarak görünür.

CSS ile açılır mobil menü oluşturma​


Örnekte üç parça birlikte çalışır: menü düğmesi için bir label, açık-kapalı durumunu tutan gizli bir checkbox ve bağlantıları içeren menü listesi. label öğesinin for değeri ile checkbox öğesinin id değeri aynı olmalıdır; aksi hâlde düğmeye dokunulduğunda menü durumu değişmez.

HTML dosyanızda menü alanını şu şekilde oluşturun:

HTML: 
<nav class="site-nav" aria-label="Ana menü">
    <a class="site-logo" href="/">Site Adı</a>

    <input class="menu-toggle" type="checkbox" id="menu-toggle">
    <label class="menu-button" for="menu-toggle">
        <span class="menu-icon" aria-hidden="true">☰</span>
        <span class="menu-text">Menü</span>
    </label>

    <ul class="menu-list">
        <li><a href="/">Ana sayfa</a></li>
        <li><a href="/hakkimizda">Hakkımızda</a></li>
        <li><a href="/hizmetler">Hizmetler</a></li>
        <li><a href="/iletisim">İletişim</a></li>
    </ul>
</nav>

Buradaki bağlantı adreslerini kendi sayfalarınızla değiştirin. label içindeki metin, yalnızca simge kullanan menülerde erişilebilirlik açısından önemlidir; kullanıcıya düğmenin işlevini açıkça gösterir.

Ardından CSS dosyanıza temel yerleşimi ekleyin:

CSS: 
* {
    box-sizing: border-box;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 64px;
    padding: 0 1rem;
    background: #172033;
}

.site-logo,
.menu-list a {
    color: #ffffff;
    text-decoration: none;
}

.site-logo {
    font-size: 1.25rem;
    font-weight: 700;
}

.menu-list {
    display: flex;
    gap: 1.25rem;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.menu-button,
.menu-toggle {
    display: none;
}

.menu-list a:hover,
.menu-list a:focus-visible {
    text-decoration: underline;
}

Bu bölümde menu-list masaüstünde yatay görünür. menu-button ve menu-toggle ise masaüstünde gizlenir; çünkü geniş ekranda menüyü açıp kapatmak gerekmez.

Mobil görünüm için bir medya sorgusu ekleyin. Eşik değer, tasarımınıza göre değişebilir; aşağıdaki 768px yalnızca örnek bir kırılma noktasıdır.

CSS: 
@media (max-width: 768px) {
    .site-nav {
        position: relative;
        flex-wrap: wrap;
        gap: 0;
        padding: 0 1rem;
    }

    .site-logo {
        margin-right: auto;
    }

    .menu-button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.65rem 0;
        color: #ffffff;
        cursor: pointer;
        user-select: none;
    }

    .menu-toggle {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .menu-button:focus-within {
        outline: 2px solid #8ec5ff;
        outline-offset: 4px;
    }

    .menu-list {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0.5rem 0 1rem;
    }

    .menu-list li {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .menu-list a {
        display: block;
        padding: 0.85rem 0;
    }

    .menu-toggle:checked ~ .menu-list {
        display: flex;
    }

    .menu-toggle:checked + .menu-button .menu-icon {
        font-size: 0;
    }

    .menu-toggle:checked + .menu-button .menu-icon::after {
        content: "×";
        font-size: 1.5rem;
    }
}

Buradaki kritik seçici .menu-toggle:checked ~ .menu-list ifadesidir. Kullanıcı Menü etiketine dokunduğunda checkbox seçilir ve aynı nav içindeki menu-list görünür. Tekrar dokunulduğunda checkbox seçimi kaldırılır ve liste yeniden gizlenir. ~ işaretinin çalışabilmesi için checkbox ile menü listesi aynı üst öğe içinde bulunmalıdır.

Kodun doğru çalıştığını nasıl kontrol edersiniz?​


HTML ve CSS dosyalarını kaydedip sayfayı tarayıcıda açın. Pencere genişliği 768px veya daha düşük olduğunda logo ile menü düğmesi görünmelidir. Düğmeye dokunduğunuzda bağlantı listesi alt satırda açılır; tekrar dokunduğunuzda kapanır. Pencereyi genişlettiğinizde bağlantılar yatay menüye dönüşür ve menü düğmesi kaybolur.

Menü hiç açılmıyorsa önce label içindeki for="menu-toggle" ile checkbox içindeki id="menu-toggle" değerlerinin aynı olduğunu kontrol edin. Menü masaüstünde de görünmüyorsa medya sorgusunun dışında kalan .menu-list kurallarını ve CSS dosyasının sayfaya gerçekten yüklendiğini kontrol edin. Liste açılıyor ancak sayfanın altında kalıyorsa menünün üstündeki veya altındaki öğelerde overflow: hidden kullanılıp kullanılmadığına bakın.

Bu yöntem menünün görünürlüğünü CSS ile yönetir; ancak açılır menünün dışına tıklandığında kapanması, Escape tuşuyla kapanması veya karmaşık alt menüler gibi davranışlar için JavaScript gerekir. Basit responsive navigasyonlarda ise yukarıdaki yapı yeterlidir ve JavaScript bağımlılığı oluşturmaz.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)