A\u00e7\u0131l\u0131r men\u00fcler (dropdown men\u00fcler), web sitelerinde gezinmeyi kolayla\u015ft\u0131ran ve kullan\u0131c\u0131 aray\u00fcz\u00fcnde d\u00fczen sa\u011flayan temel bile\u015fenlerden biridir. Bu makalede, modern ve h\u0131zl\u0131 bir \u015fekilde aray\u00fcz geli\u015ftirmeyi sa\u011flayan Tailwind CSS kullanarak, tamamen i\u015flevsel, stil sahibi ve eri\u015filebilir bir a\u00e7\u0131l\u0131r men\u00fcn\u00fcn nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Tailwind CSS’in sundu\u011fu esneklik ve utility-first yakla\u015f\u0131m\u0131 sayesinde, \u00f6zel CSS yazmaya gerek kalmadan, sadece HTML s\u0131n\u0131flar\u0131 ile g\u00fc\u00e7l\u00fc bir men\u00fc yap\u0131s\u0131 kuraca\u011f\u0131z.<\/p>\n
Bir Tailwind CSS projesi ba\u015flatmak, a\u00e7\u0131l\u0131r men\u00fc olu\u015fturma s\u00fcrecinin ilk ve en \u00f6nemli ad\u0131m\u0131d\u0131r. Bu b\u00f6l\u00fcmde, projenize Tailwind CSS’i nas\u0131l entegre edece\u011finizi ve temel yap\u0131land\u0131rmalar\u0131 nas\u0131l yapaca\u011f\u0131n\u0131z\u0131 \u00f6\u011freneceksiniz.<\/p>\n
Yeni bir projeye Tailwind CSS eklemek i\u00e7in \u00f6ncelikle bir Node.js ortam\u0131na ihtiyac\u0131n\u0131z var. Proje klas\u00f6r\u00fcn\u00fczde terminali a\u00e7arak a\u015fa\u011f\u0131daki komutlar\u0131 \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
\nnpm init -y\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n<\/pre>\n<\/code><\/p>\n
\nnpm init -y<\/code>: Yeni bir package.json<\/code> dosyas\u0131 olu\u015fturur.<\/li>\nnpm install -D tailwindcss postcss autoprefixer<\/code>: Tailwind CSS, PostCSS ve Autoprefixer ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olarak y\u00fckler.<\/li>\nnpx tailwindcss init -p<\/code>: Bir tailwind.config.js<\/code> dosyas\u0131 ve bir postcss.config.js<\/code> dosyas\u0131 olu\u015fturur. -p<\/code> bayra\u011f\u0131 PostCSS yap\u0131land\u0131rmas\u0131n\u0131 da ekler.<\/li>\n<\/ul>\ntailwind.config.js<\/code> Dosyas\u0131 Ayarlar\u0131<\/h4>\ntailwind.config.js<\/code> dosyas\u0131, Tailwind CSS'in projenizde hangi dosyalardaki s\u0131n\u0131flar\u0131 tarayaca\u011f\u0131n\u0131 ve CSS \u00e7\u0131kt\u0131s\u0131n\u0131 buna g\u00f6re olu\u015fturaca\u011f\u0131n\u0131 belirler. Bu, gereksiz CSS'in \u00f6nlenmesi i\u00e7in kritik bir ad\u0131md\u0131r. content<\/code> (eski ad\u0131yla purge<\/code>) dizisini projenizin HTML veya JavaScript dosyalar\u0131n\u0131 i\u00e7erecek \u015fekilde g\u00fcncelleyin:<\/p>\n\n\/\/ tailwind.config.js\nmodule.exports = {\n content: [\n \".\/index.html\",\n \".\/src\/**\/*.{vue,js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n<\/pre>\n<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte, Tailwind CSS'in index.html<\/code> ve src<\/code> klas\u00f6r\u00fc alt\u0131ndaki t\u00fcm .vue<\/code>, .js<\/code>, .ts<\/code>, .jsx<\/code>, .tsx<\/code> dosyalar\u0131n\u0131 tarayaca\u011f\u0131 belirtilmi\u015ftir. Kendi proje yap\u0131n\u0131za g\u00f6re bu yolu ayarlaman\u0131z gerekmektedir.<\/p>\nCSS Dosyan\u0131za Tailwind Direktiflerini Ekleme<\/h4>\n
Tailwind'in temel stillerini projenize dahil etmek i\u00e7in ana CSS dosyan\u0131z\u0131 (genellikle src\/input.css<\/code> veya src\/style.css<\/code> gibi) olu\u015fturun ve i\u00e7ine a\u015fa\u011f\u0131daki direktifleri ekleyin:<\/p>\n\n\/* src\/input.css *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n<\/pre>\n<\/code><\/p>\n
Bu direktifler, Tailwind'in temel stillerini, bile\u015fen stillerini ve yard\u0131mc\u0131 s\u0131n\u0131flar\u0131n\u0131 projenize dahil eder. Son olarak, bu dosyay\u0131 derlemek ve kullan\u0131labilir bir CSS \u00e7\u0131kt\u0131s\u0131 elde etmek i\u00e7in a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
\nnpx tailwindcss -i .\/src\/input.css -o .\/dist\/output.css --watch\n<\/pre>\n<\/code><\/p>\n
Bu komut, src\/input.css<\/code> dosyas\u0131n\u0131 okur, Tailwind s\u0131n\u0131flar\u0131n\u0131 i\u015fler ve derlenmi\u015f CSS'i dist\/output.css<\/code> dosyas\u0131na yazar. --watch<\/code> bayra\u011f\u0131 sayesinde, dosyalardaki de\u011fi\u015fiklikleri otomatik olarak izler ve yeniden derler.<\/p>\nTemel Dropdown Men\u00fc HTML Yap\u0131s\u0131<\/h3>\n
Bir a\u00e7\u0131l\u0131r men\u00fc, genellikle bir tetikleyici (buton veya ba\u011flant\u0131) ve bu tetikleyiciye t\u0131kland\u0131\u011f\u0131nda g\u00f6r\u00fcn\u00fcr hale gelen bir men\u00fc i\u00e7eri\u011finden olu\u015fur. Do\u011fru HTML yap\u0131s\u0131, hem i\u015flevsellik hem de eri\u015filebilirlik a\u00e7\u0131s\u0131ndan hayati \u00f6neme sahiptir.<\/p>\n
Men\u00fc Kapsay\u0131c\u0131s\u0131n\u0131 Olu\u015fturma<\/h4>\n
A\u00e7\u0131l\u0131r men\u00fcn\u00fcn t\u00fcm bile\u015fenlerini kapsayacak bir ana div<\/code> etiketi ile ba\u015flayaca\u011f\u0131z. Bu kapsay\u0131c\u0131, men\u00fcn\u00fcn konumland\u0131r\u0131lmas\u0131 ve g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fcn y\u00f6netilmesi i\u00e7in temel bir referans noktas\u0131 olacakt\u0131r.<\/p>\n\n\n \n<\/div>\n<\/pre>\n<\/code><\/p>\n
relative<\/code> s\u0131n\u0131f\u0131, i\u00e7indeki men\u00fc i\u00e7eri\u011finin (absolute<\/code> konumland\u0131r\u0131lacak olan) bu kapsay\u0131c\u0131ya g\u00f6re konumland\u0131r\u0131lmas\u0131n\u0131 sa\u011flar. inline-block<\/code> ve text-left<\/code> ise men\u00fcn\u00fcn sayfa d\u00fczenindeki davran\u0131\u015f\u0131n\u0131 belirler.<\/p>\nButon ve Men\u00fc \u00d6\u011felerini Tan\u0131mlama<\/h4>\n
Men\u00fcy\u00fc tetikleyecek bir