{"id":12916,"date":"2025-02-19T11:30:15","date_gmt":"2025-02-19T08:30:15","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/"},"modified":"2025-02-19T11:30:15","modified_gmt":"2025-02-19T08:30:15","slug":"tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/","title":{"rendered":"Tailwind CSS ile Duyarl\u0131 Dropdown Men\u00fcye Sahip Navigasyon \u00c7ubu\u011fu Olu\u015fturma"},"content":{"rendered":"

<\/p>\n

Tailwind CSS ile Duyarl\u0131 Dropdown Men\u00fcye Sahip Navigasyon \u00c7ubu\u011fu Olu\u015fturma<\/p>\n

Merhaba! Bu makalede, Tailwind CSS kullanarak duyarl\u0131 (responsive) ve a\u00e7\u0131l\u0131r men\u00fcler (dropdown) i\u00e7eren bir navigasyon \u00e7ubu\u011fu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. \u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m. Ard\u0131ndan, Tailwind CSS s\u0131n\u0131flar\u0131n\u0131 kullanarak stilleme i\u015flemlerini ger\u00e7ekle\u015ftirece\u011fiz.<\/p>\n

Temel HTML Yap\u0131s\u0131<\/h2>\n

\u0130lk olarak, navigasyon \u00e7ubu\u011funun temel HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Bu yap\u0131da, ana men\u00fc \u00f6\u011felerini ve dropdown men\u00fclerini bar\u0131nd\u0131ran liste \u00f6\u011felerini g\u00f6receksiniz. A\u015fa\u011f\u0131da basit bir \u00f6rnek yer al\u0131yor:<\/p>\n

\n<nav class=\"bg-gray-800\">\n  <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n    <div class=\"flex justify-between h-16\">\n      <div class=\"flex\">\n        <div class=\"flex-shrink-0 flex items-center\">\n          <a href=\"#\" class=\"text-white text-xl font-bold\">Logom<\/a>\n        <\/div>\n        <div class=\"hidden sm:block sm:ml-6\">\n          <div class=\"flex space-x-4\">\n            <a href=\"#\" class=\"text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium\">Anasayfa<\/a>\n            <a href=\"#\" class=\"text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium\">Hakk\u0131m\u0131zda<\/a>\n            <div class=\"relative inline-block text-left\">\n              <button type=\"button\" class=\"text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium\" id=\"options-menu\">\n                Servisler <svg class=\"ml-2 -mr-1 h-4 w-4\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                  <path fill-rule=\"evenodd\" d=\"M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 6.707 8.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/>\n                <\/svg>\n              <\/button>\n              <div id=\"options-menu-items\" class=\"absolute z-10 hidden bg-white rounded-md shadow-lg mt-2 w-48\">\n                <a href=\"#\" class=\"block px-4 py-2 text-gray-700 hover:bg-gray-100\">Servis 1<\/a>\n                <a href=\"#\" class=\"block px-4 py-2 text-gray-700 hover:bg-gray-100\">Servis 2<\/a>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"-mr-2 flex items-center sm:hidden\">\n        <button class=\"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white\">\n          <svg class=\"h-6 w-6\" stroke=\"currentColor\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" \/>\n          <\/svg>\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/nav>\n<\/code><\/pre>\n
Bu kod,  responsive davran\u0131\u015f\u0131 sa\u011flamak i\u00e7in Tailwind CSS’in  sm: ve lg: gibi breakpoint s\u0131n\u0131flar\u0131n\u0131 kullan\u0131r.  Ayr\u0131ca, dropdown men\u00fcs\u00fcn\u00fc g\u00f6stermek ve gizlemek i\u00e7in JavaScript kullan\u0131lmas\u0131 gerekecektir (\u00f6rnekte g\u00f6sterilmemi\u015ftir).  Javascript ile ilgili daha detayl\u0131 bilgi i\u00e7in fatihsoysal.com<\/a> sitesini ziyaret edebilirsiniz.<\/p>\n
Javascript ile Dropdown Kontrol\u00fc<\/h2>\n
Yukar\u0131daki HTML yap\u0131s\u0131n\u0131n do\u011fru \u00e7al\u0131\u015fmas\u0131 i\u00e7in  Javascript ile dropdown men\u00fcs\u00fcn\u00fcn g\u00f6sterilmesi ve gizlenmesi kontrol edilmelidir.  Bu i\u015flem i\u00e7in, bir javascript fonksiyonu ile butonun t\u0131klanma olay\u0131n\u0131 dinleyip, dropdown men\u00fcs\u00fcn\u00fcn g\u00f6r\u00fcn\u00fcrl\u00fck durumunu de\u011fi\u015ftirebiliriz. Bu k\u0131s\u0131m detayl\u0131 olarak anlat\u0131lmamaktad\u0131r, ancak temel olarak bu \u015fekilde i\u015fler.<\/p>\n
\u0130\u015fte size yard\u0131mc\u0131 olabilecek bir kaynak: Javascript.com<\/a><\/p>\n
Responsive Tasar\u0131m \u0130pu\u00e7lar\u0131<\/h2>\n
Responsive bir navigasyon \u00e7ubu\u011fu olu\u015ftururken, farkl\u0131 ekran boyutlar\u0131nda gezinmeyi kolayla\u015ft\u0131rmak \u00f6nemlidir.  Bunun i\u00e7in,  Tailwind CSS’in  uyum sa\u011flayan s\u0131n\u0131flar\u0131n\u0131 kullan\u0131n. \u00d6rne\u011fin, k\u00fc\u00e7\u00fck ekranlarda men\u00fc \u00f6\u011felerini gizleyip, hamburger men\u00fcs\u00fc ile a\u00e7abilirsiniz.  B\u00fcy\u00fck ekranlarda ise t\u00fcm men\u00fc \u00f6\u011feleri g\u00f6r\u00fcn\u00fcr olabilir.<\/p>\n
Sonu\u00e7<\/h2>\n
Bu makalede, Tailwind CSS kullanarak responsive ve dropdown men\u00fcler i\u00e7eren bir navigasyon \u00e7ubu\u011fu olu\u015fturmay\u0131 \u00f6\u011frendiniz.  Bu, web sitenizin kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in \u00f6nemli bir ad\u0131md\u0131r.  Umar\u0131m bu rehber faydal\u0131 olmu\u015ftur!  Daha fazla bilgi ve \u00f6rnek i\u00e7in  fatihsoysal.com<\/a>  adresini ziyaret edebilirsiniz.<\/p>\n
 #Etiketler: Tailwind CSS, Responsive Navigasyon, Dropdown Men\u00fc, HTML, CSS, Web Geli\u015ftirme, Fatih Soysal,  Javascript,  Uyumlu Tasar\u0131m<\/p>\n
<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Tailwind CSS ile Duyarl\u0131 Dropdown Men\u00fcye Sahip Navigasyon \u00c7ubu\u011fu Olu\u015fturma Merhaba! Bu makalede, Tailwind CSS kullanarak duyarl\u0131 (responsive)…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-12916","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nTailwind CSS ile Duyarl\u0131 Dropdown Men\u00fcye Sahip Navigasyon \u00c7ubu\u011fu Olu\u015fturma<\/title>\n<meta name=\"description\" content=\"Merhaba! Bu makalede, Tailwind CSS kullanarak duyarl\u0131 (responsive) ve a\u00e7\u0131l\u0131r men\u00fcler (dropdown) i\u00e7eren bir navigasyon \u00e7ubu\u011fu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. \u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m. Ard\u0131ndan, Tailwind CSS s\u0131n\u0131flar\u0131n\u0131 kullanarak stilleme i\u015flemlerini ger\u00e7ekle\u015ftirece\u011fiz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tailwind CSS ile Duyarl\u0131 Dropdown Men\u00fcye Sahip Navigasyon \u00c7ubu\u011fu Olu\u015fturma\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Bu makalede, Tailwind CSS kullanarak duyarl\u0131 (responsive) ve a\u00e7\u0131l\u0131r men\u00fcler (dropdown) i\u00e7eren bir navigasyon \u00e7ubu\u011fu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. \u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m. Ard\u0131ndan, Tailwind CSS s\u0131n\u0131flar\u0131n\u0131 kullanarak stilleme i\u015flemlerini ger\u00e7ekle\u015ftirece\u011fiz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-19T08:30:15+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Tailwind CSS ile Duyarl\u0131 Dropdown Men\u00fcye Sahip Navigasyon \u00c7ubu\u011fu Olu\u015fturma\",\"datePublished\":\"2025-02-19T08:30:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/\"},\"wordCount\":403,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/\",\"name\":\"Tailwind CSS ile Duyarl\u0131 Dropdown Men\u00fcye Sahip Navigasyon \u00c7ubu\u011fu Olu\u015fturma\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-02-19T08:30:15+00:00\",\"description\":\"Merhaba! Bu makalede, Tailwind CSS kullanarak duyarl\u0131 (responsive) ve a\u00e7\u0131l\u0131r men\u00fcler (dropdown) i\u00e7eren bir navigasyon \u00e7ubu\u011fu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. \u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m. Ard\u0131ndan, Tailwind CSS s\u0131n\u0131flar\u0131n\u0131 kullanarak stilleme i\u015flemlerini ger\u00e7ekle\u015ftirece\u011fiz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tailwind CSS ile Duyarl\u0131 Dropdown Men\u00fcye Sahip Navigasyon \u00c7ubu\u011fu Olu\u015fturma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tailwind CSS ile Duyarl\u0131 Dropdown Men\u00fcye Sahip Navigasyon \u00c7ubu\u011fu Olu\u015fturma","description":"Merhaba! Bu makalede, Tailwind CSS kullanarak duyarl\u0131 (responsive) ve a\u00e7\u0131l\u0131r men\u00fcler (dropdown) i\u00e7eren bir navigasyon \u00e7ubu\u011fu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. \u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m. Ard\u0131ndan, Tailwind CSS s\u0131n\u0131flar\u0131n\u0131 kullanarak stilleme i\u015flemlerini ger\u00e7ekle\u015ftirece\u011fiz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/","og_locale":"tr_TR","og_type":"article","og_title":"Tailwind CSS ile Duyarl\u0131 Dropdown Men\u00fcye Sahip Navigasyon \u00c7ubu\u011fu Olu\u015fturma","og_description":"Merhaba! Bu makalede, Tailwind CSS kullanarak duyarl\u0131 (responsive) ve a\u00e7\u0131l\u0131r men\u00fcler (dropdown) i\u00e7eren bir navigasyon \u00e7ubu\u011fu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. \u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m. Ard\u0131ndan, Tailwind CSS s\u0131n\u0131flar\u0131n\u0131 kullanarak stilleme i\u015flemlerini ger\u00e7ekle\u015ftirece\u011fiz.","og_url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-02-19T08:30:15+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"4 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Tailwind CSS ile Duyarl\u0131 Dropdown Men\u00fcye Sahip Navigasyon \u00c7ubu\u011fu Olu\u015fturma","datePublished":"2025-02-19T08:30:15+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/"},"wordCount":403,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/","url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/","name":"Tailwind CSS ile Duyarl\u0131 Dropdown Men\u00fcye Sahip Navigasyon \u00c7ubu\u011fu Olu\u015fturma","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-02-19T08:30:15+00:00","description":"Merhaba! Bu makalede, Tailwind CSS kullanarak duyarl\u0131 (responsive) ve a\u00e7\u0131l\u0131r men\u00fcler (dropdown) i\u00e7eren bir navigasyon \u00e7ubu\u011fu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. \u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m. Ard\u0131ndan, Tailwind CSS s\u0131n\u0131flar\u0131n\u0131 kullanarak stilleme i\u015flemlerini ger\u00e7ekle\u015ftirece\u011fiz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-duyarli-dropdown-menuye-sahip-navigasyon-cubugu-olusturma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tailwind CSS ile Duyarl\u0131 Dropdown Men\u00fcye Sahip Navigasyon \u00c7ubu\u011fu Olu\u015fturma"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/12916","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=12916"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/12916\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=12916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=12916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=12916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}