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

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

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

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

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

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.

    
    
    
    


    

        

            
                Seçenekler
                
            
        

        

            

                Hesap Ayarları
                Destek
                Lisans
                

                    Çıkış Yap
                
            
        
    

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:

  Seçenekler
  

• 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