Ne Aramıştınız?
Makaleler, projeler ve kaynaklar arasında arama yaparak size özel fikirler, bilgiler ve ilham kaynakları keşfedin.
Takip et
Ne Aramıştınız?
Makaleler, projeler ve kaynaklar arasında arama yaparak size özel fikirler, bilgiler ve ilham kaynakları keşfedin.
Takip et
Kategoriler
Son Yazılar

Tailwind CSS ile Modern ve Erişilebilir Açılır Menü Oluşturma Rehberi

Bir Tailwind CSS projesi başlatmak, açılır menü oluşturma sürecinin ilk ve en önemli adımıdır. Bu bölümde, projenize Tailwind CSS’i nasıl enteg…

Tailwind CSS ile Modern ve Erişilebilir Açılır Menü Oluşturma Rehberi

Açılır menüler (dropdown menüler), web sitelerinde gezinmeyi kolaylaştıran ve kullanıcı arayüzünde düzen sağlayan temel bileşenlerden biridir. Bu makalede, modern ve hızlı bir şekilde arayüz geliştirmeyi sağlayan Tailwind CSS kullanarak, tamamen işlevsel, stil sahibi ve erişilebilir bir açılır menünün nasıl oluşturulacağını adım adım inceleyeceğiz. Tailwind CSS’in sunduğu esneklik ve utility-first yaklaşımı sayesinde, özel CSS yazmaya gerek kalmadan, sadece HTML sınıfları ile güçlü bir menü yapısı kuracağız.

Tailwind CSS Kurulumu ve Proje Yapılandırması

Bir Tailwind CSS projesi başlatmak, açılır menü oluşturma sürecinin ilk ve en önemli adımıdır. Bu bölümde, projenize Tailwind CSS’i nasıl entegre edeceğinizi ve temel yapılandırmaları nasıl yapacağınızı öğreneceksiniz.

NPM ile Tailwind CSS Entegrasyonu

Yeni bir projeye Tailwind CSS eklemek için öncelikle bir Node.js ortamına ihtiyacınız var. Proje klasörünüzde terminali açarak aşağıdaki komutları çalıştırın:


npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

  • npm init -y: Yeni bir package.json dosyası oluşturur.
  • npm install -D tailwindcss postcss autoprefixer: Tailwind CSS, PostCSS ve Autoprefixer bağımlılıklarını geliştirme bağımlılığı olarak yükler.
  • npx tailwindcss init -p: Bir tailwind.config.js dosyası ve bir postcss.config.js dosyası oluşturur. -p bayrağı PostCSS yapılandırmasını da ekler.

tailwind.config.js Dosyası Ayarları

tailwind.config.js dosyası, Tailwind CSS'in projenizde hangi dosyalardaki sınıfları tarayacağını ve CSS çıktısını buna göre oluşturacağını belirler. Bu, gereksiz CSS'in önlenmesi için kritik bir adımdır. content (eski adıyla purge) dizisini projenizin HTML veya JavaScript dosyalarını içerecek şekilde güncelleyin:


// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Yukarıdaki örnekte, Tailwind CSS'in index.html ve src klasörü altındaki tüm .vue, .js, .ts, .jsx, .tsx dosyalarını tarayacağı belirtilmiştir. Kendi proje yapınıza göre bu yolu ayarlamanız gerekmektedir.

CSS Dosyanıza Tailwind Direktiflerini Ekleme

Tailwind'in temel stillerini projenize dahil etmek için ana CSS dosyanızı (genellikle src/input.css veya src/style.css gibi) oluşturun ve içine aşağıdaki direktifleri ekleyin:


/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Bu direktifler, Tailwind'in temel stillerini, bileşen stillerini ve yardımcı sınıflarını projenize dahil eder. Son olarak, bu dosyayı derlemek ve kullanılabilir bir CSS çıktısı elde etmek için aşağıdaki komutu çalıştırın:


npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Bu komut, src/input.css dosyasını okur, Tailwind sınıflarını işler ve derlenmiş CSS'i dist/output.css dosyasına yazar. --watch bayrağı sayesinde, dosyalardaki değişiklikleri otomatik olarak izler ve yeniden derler.

Temel Dropdown Menü HTML Yapısı

Bir açılır menü, genellikle bir tetikleyici (buton veya bağlantı) ve bu tetikleyiciye tıklandığında görünür hale gelen bir menü içeriğinden oluşur. Doğru HTML yapısı, hem işlevsellik hem de erişilebilirlik açısından hayati öneme sahiptir.

Menü Kapsayıcısını Oluşturma

Açılır menünün tüm bileşenlerini kapsayacak bir ana div etiketi ile başlayacağız. Bu kapsayıcı, menünün konumlandırılması ve görünürlüğünün yönetilmesi için temel bir referans noktası olacaktır.

relative sınıfı, içindeki menü içeriğinin (absolute konumlandırılacak olan) bu kapsayıcıya göre konumlandırılmasını sağlar. inline-block ve text-left ise menünün sayfa düzenindeki davranışını belirler.

Buton ve Menü Öğelerini Tanımlama

Menüyü tetikleyecek bir etiketi ve açıldığında görünecek menü öğelerini içeren bir

veya
    etiketi kullanacağız. Menü öğeleri genellikle bağlantılardan oluşur.

    Bu yapı, bir buton ve başlangıçta hidden sınıfıyla gizlenmiş bir menü içeriği içerir. Menü içeriği role="menu" ve aria-labelledby gibi erişilebilirlik nitelikleri ile zenginleştirilmiştir.

    Örnek HTML Şablonu

    Yukarıdaki iki bölümü birleştirerek tam bir HTML şablonu elde edebiliriz. Bu şablon, bir açılır menünün temel iskeletini oluşturur ve Tailwind CSS sınıflarıyla stilize edilmeye hazırdır.

    



    
    
    Tailwind CSS Dropdown

    Bu şablonu bir .html dosyasına kaydederek ve Tailwind CSS derleyicisini çalıştırarak menünüzün stilize edilmiş halini görebilirsiniz.

    Tailwind CSS Sınıfları ile Görsel Tasarım

    Tailwind CSS'in gücü, önceden tanımlanmış yardımcı sınıflar aracılığıyla bileşenleri hızlıca stilize etme yeteneğinden gelir. Bu bölümde, açılır menümüzün butonunu, menü kutusunu ve menü öğelerini nasıl görselleştireceğimizi inceleyeceğiz.

    Buton Stilini Belirleme

    Açılır menüyü tetikleyen butonun stilini belirlemek için çeşitli Tailwind sınıflarını kullanabiliriz. Butonun modern ve kullanıcı dostu görünmesini sağlamak için aşağıdaki sınıfları uygulayabiliriz:

    • inline-flex justify-center: Buton içeriğini yatayda ortalar.
    • w-full: Butonun kapsayıcısının tüm genişliğini kaplamasını sağlar.
    • rounded-md border border-gray-300 shadow-sm: Kenar yuvarlaklığı, kenarlık ve hafif bir gölge ekler.
    • px-4 py-2: Yatay ve dikey dolgu ekler.
    • bg-white text-sm font-medium text-gray-700: Arka plan rengini, metin boyutunu, ağırlığını ve rengini belirler.
    • hover:bg-gray-50: Fare üzerine gelindiğinde arka plan rengini değiştirir.
    • focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500: Odaklandığında ana hat stilini kaldırır ve odak halkası ekler.

    Açılır Menü Kutusunun Tasarımı

    Menü içeriğini barındıran div etiketi, butonun altında ve genellikle sağa hizalı olarak görünmelidir. Ayrıca bir arka plan rengi, gölge ve kenarlık da içermelidir.

    • origin-top-right: Dönüşümün başlangıç noktasını sağ üst köşe olarak ayarlar, animasyonlar için faydalıdır.
    • absolute right-0 mt-2: Menüyü butona göre konumlandırır (sağda ve 2 birim aşağıda).
    • w-56: Menünün genişliğini ayarlar.
    • rounded-md shadow-lg bg-white: Kenar yuvarlaklığı, büyük bir gölge ve beyaz arka plan rengi ekler.
    • ring-1 ring-black ring-opacity-5: Hafif bir dış kenarlık (halka) ekler.
    • focus:outline-none: Odaklandığında varsayılan ana hat stilini kaldırır.
    • hidden: Başlangıçta menüyü gizler. JavaScript ile bu sınıf kaldırılıp eklenecektir.

    Menü Öğelerinin Stilize Edilmesi

    Menü içindeki her bir bağlantı ( veya ) için de stiller tanımlamamız gerekir. Bu stiller, öğelerin okunabilirliğini ve etkileşimini artıracaktır.

    
Hesap Ayarları

    • text-gray-700: Metin rengini belirler.
    • block: Bağlantının tüm genişliği kaplamasını ve blok öğe gibi davranmasını sağlar.
    • px-4 py-2: Yatay ve dikey dolgu ekler.
    • text-sm: Metin boyutunu küçük yapar.
    • hover:bg-gray-100: Fare üzerine gelindiğinde arka plan rengini hafifçe değiştirir, etkileşimi gösterir.

    Bu sınıflar sayesinde, herhangi bir özel CSS yazmadan, estetik ve işlevsel bir açılır menü görünümü elde etmiş oluruz.

    JavaScript ile Dinamik Etkileşim Ekleme

    HTML ve Tailwind CSS ile menümüzün görsel yapısını oluşturduk. Ancak menünün açılıp kapanması gibi dinamik davranışları sağlamak için JavaScript'e ihtiyacımız var. Vanilla JavaScript kullanarak bu etkileşimleri ekleyeceğiz.

    Menüyü Açma/Kapatma Mantığı

    Menüyü açmak veya kapatmak için, menü içeriğini gizleyen hidden sınıfını ekleyip çıkarmamız yeterlidir. Bir olay dinleyicisi (event listener) ile buton tıklamalarını yakalayacağız.

    
// script.js
document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.getElementById('menu-button');
    const dropdownMenu = document.querySelector('[role="menu"]');

    menuButton.addEventListener('click', () => {
        const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
        menuButton.setAttribute('aria-expanded', String(!isExpanded));
        dropdownMenu.classList.toggle('hidden');
    });
});

    Bu kod parçası:

    • DOMContentLoaded: Sayfa tamamen yüklendiğinde kodun çalışmasını sağlar.
    • menuButton ve dropdownMenu: İlgili HTML öğelerini seçer.
    • menuButton.addEventListener('click', ...): Butona tıklandığında çalışacak bir fonksiyon tanımlar.
    • aria-expanded niteliğini günceller: Bu, ekran okuyucular için menünün açık veya kapalı olduğunu belirtir.
    • dropdownMenu.classList.toggle('hidden'): Menüde hidden sınıfını varsa kaldırır, yoksa ekler.

    Bu JavaScript dosyasını HTML dosyanızın en altına, kapanış

    etiketinden hemen önce eklemeyi unutmayın: .

    Dışarı Tıklama ile Kapatma

    Kullanıcı deneyimi açısından, menü açıkken menünün dışına tıklandığında menünün otomatik olarak kapanması beklenir. Bunu sağlamak için document üzerine bir olay dinleyicisi ekleyebiliriz.

    
// script.js (önceki kodun devamı)
document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.getElementById('menu-button');
    const dropdownMenu = document.querySelector('[role="menu"]');

    const toggleMenu = () => {
        const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
        menuButton.setAttribute('aria-expanded', String(!isExpanded));
        dropdownMenu.classList.toggle('hidden');
    };

    menuButton.addEventListener('click', toggleMenu);

    document.addEventListener('click', (event) => {
        if (!dropdownMenu.contains(event.target) && !menuButton.contains(event.target) && !dropdownMenu.classList.contains('hidden')) {
            toggleMenu(); // Menü açıksa kapat
        }
    });
});

    Bu eklenen kod, belgedeki herhangi bir tıklamayı dinler. Eğer tıklanan hedef menü veya menü butonu değilse ve menü açıksa, menüyü kapatır.

    Klavye Navigasyonu Ekleme

    Erişilebilirlik için klavye ile menüde gezinmek ve menüyü kapatmak önemlidir. Özellikle Escape tuşu ile menüyü kapatma ve Tab, ArrowUp, ArrowDown tuşları ile menü öğeleri arasında gezinme özellikleri eklemeliyiz.

    
// script.js (önceki kodun devamı)
document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.getElementById('menu-button');
    const dropdownMenu = document.querySelector('[role="menu"]');
    const menuItems = Array.from(dropdownMenu.querySelectorAll('[role="menuitem"]'));

    const toggleMenu = (open = null) => {
        const isCurrentlyOpen = !dropdownMenu.classList.contains('hidden');
        const shouldOpen = open === null ? !isCurrentlyOpen : open;

        if (shouldOpen) {
            dropdownMenu.classList.remove('hidden');
            menuButton.setAttribute('aria-expanded', 'true');
            // Menü açıldığında ilk öğeye odaklan
            menuItems[0]?.focus();
        } else {
            dropdownMenu.classList.add('hidden');
            menuButton.setAttribute('aria-expanded', 'false');
            // Menü kapandığında butona odaklan
            menuButton.focus();
        }
    };

    menuButton.addEventListener('click', () => toggleMenu());

    document.addEventListener('click', (event) => {
        if (!dropdownMenu.contains(event.target) && !menuButton.contains(event.target) && !dropdownMenu.classList.contains('hidden')) {
            toggleMenu(false);
        }
    });

    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && !dropdownMenu.classList.contains('hidden')) {
            toggleMenu(false);
        }

        if (event.key === 'Tab' && !dropdownMenu.classList.contains('hidden')) {
            // Tab ile menüden çıkıldığında menüyü kapat
            const focusedElement = document.activeElement;
            const lastMenuItem = menuItems[menuItems.length - 1];
            if (event.shiftKey && focusedElement === menuItems[0]) {
                toggleMenu(false);
                event.preventDefault(); // Varsayılan Tab davranışını engelle
            } else if (!event.shiftKey && focusedElement === lastMenuItem) {
                toggleMenu(false);
                event.preventDefault(); // Varsayılan Tab davranışını engelle
            }
        }

        if (['ArrowUp', 'ArrowDown'].includes(event.key) && !dropdownMenu.classList.contains('hidden')) {
            event.preventDefault(); // Sayfa kaydırmayı engelle
            const focusedElement = document.activeElement;
            const currentIndex = menuItems.indexOf(focusedElement);
            let nextIndex = -1;

            if (event.key === 'ArrowDown') {
                nextIndex = currentIndex === menuItems.length - 1 ? 0 : currentIndex + 1;
            } else if (event.key === 'ArrowUp') {
                nextIndex = currentIndex === 0 ? menuItems.length - 1 : currentIndex - 1;
            }

            if (nextIndex !== -1) {
                menuItems[nextIndex].focus();
            }
        }
    });
});

    Bu gelişmiş JavaScript kodu, menünün açılışında ilk öğeye odaklanmayı, Escape tuşuyla kapatmayı ve ArrowUp/ArrowDown tuşlarıyla menü öğeleri arasında döngüsel olarak gezinmeyi sağlar. Tab tuşu ile menüden çıkıldığında menünün kapanmasını da yönetir.

    Erişilebilirlik ve Kullanıcı Deneyimi İyileştirmeleri

    Bir açılır menünün sadece görsel olarak iyi görünmesi yeterli değildir; herkes tarafından erişilebilir olması ve iyi bir kullanıcı deneyimi sunması da kritik öneme sahiptir. Bu bölümde, menümüzü daha erişilebilir hale getirmek için kullanabileceğimiz yöntemleri inceleyeceğiz.

    ARIA Niteliklerinin Kullanımı

    ARIA (Accessible Rich Internet Applications) nitelikleri, ekran okuyucular gibi yardımcı teknolojilere web içeriğinin rolü, durumu ve özellikleri hakkında bilgi sağlamak için kullanılır. Açılır menüler için bazı önemli ARIA nit

    byFatih Soysal
    0
    Yorumlar
    İçeriği beğendiniz mi? Bir tartışma başlatın veya görüşlerinizi paylaşın.
    Yorum Yaz

    Bir yanıt yazın

    E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

    Gönder

    Aşağıdaki içerikler de ilgilinizi çekebilir:

    E-posta Bülteni
    Yazılım Topluluğuna Katılın
    En son güncellemeleri, yaratıcı ipuçlarını ve özel kaynakları doğrudan e-posta kutunuza alın. Tasarım ve inovasyonun geleceğini birlikte keşfedelim.
    Exit mobile version