[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-dom-manipulasyonuyla-menu-acma-kapatma-baslangic-seviyesi-javascript-rehberi":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},23432,"DOM Manipülasyonuyla Menü Açma Kapatma: Başlangıç Seviyesi JavaScript Rehberi","Bu yazıda, \u003Cstrong>DOM\u003C/strong> manipülasyonu kullanarak basit bir \u003Cstrong>menü açma kapatma\u003C/strong> işlevi nasıl yapılır, \u003Cstrong>JavaScript\u003C/strong> ile adım adım anlatıyoruz. Başlangıç seviyesindeki geliştiriciler için ideal bir mini proje.","\u003Ch1>DOM Manipülasyonuyla Menü Açma Kapatma: Başlangıç Seviyesi JavaScript Rehberi\u003C/h1>\u003Cp>Web geliştirme dünyasında, kullanıcı deneyimini artırmak için dinamik ve etkileşimli arayüzler oluşturmak çok önemlidir. Bu tür etkileşimlerin temelinde ise \u003Cstrong>DOM\u003C/strong> manipülasyonu yer alır. Özellikle \u003Cstrong>menü açma kapatma\u003C/strong> gibi sık kullanılan işlevler, JavaScript ile kolayca gerçekleştirilebilir. Bu yazıda, \u003Cstrong>başlangıç seviyesi\u003C/strong> geliştiriciler için \u003Cstrong>DOM\u003C/strong> manipülasyonunu kullanarak basit bir menü açma kapatma fonksiyonunun nasıl yapılacağını adım adım anlatacağız.\u003C/p>\u003Ch2>DOM ve Manipülasyon Nedir?\u003C/h2>\u003Cp>\u003Cstrong>DOM\u003C/strong> (Document Object Model), HTML ve XML belgelerinin programatik olarak erişilip değiştirilebilmesini sağlayan bir yapıdır. Web sayfasındaki tüm elemanlar, bu model üzerinden nesne olarak temsil edilir ve JavaScript ile bu nesneler üzerinde değişiklik yapılabilir. İşte bu sürece \u003Cstrong>DOM manipülasyon\u003C/strong> denir.\u003C/p>\u003Cp>Örneğin, bir menüyü açmak veya kapatmak için menü elemanının görünürlüğünü değiştirmek gerekir. Bu işlem, JavaScript ile ilgili DOM elemanına erişip, onun stil özelliklerini değiştirmekle gerçekleşir.\u003C/p>\u003Ch2>Menü Açma Kapatma İşlevi Neden Önemlidir?\u003C/h2>\u003Cp>Modern web sitelerinde, özellikle mobil uyumlu tasarımlarda, menüler genellikle gizlenir ve kullanıcı bir butona tıkladığında açılır. Bu sayede sayfa daha sade görünür ve kullanıcı deneyimi artar. Menü açma kapatma işlevi, kullanıcıların site içinde kolayca gezinmesini sağlar.\u003C/p>\u003Cp>Bu işlevi \u003Cstrong>JavaScript\u003C/strong> ve \u003Cstrong>DOM\u003C/strong> manipülasyonu ile yapmak, hem performanslı hem de kullanıcı dostu çözümler sunar. Ayrıca, bu tür mini projeler \u003Cstrong>başlangıç seviyesi\u003C/strong> geliştiriciler için harika bir pratik alanıdır.\u003C/p>\u003Ch2>Adım Adım Menü Açma Kapatma Projesi\u003C/h2>\u003Ch3>1. HTML Yapısını Oluşturma\u003C/h3>\u003Cp>İlk olarak, basit bir menü yapısı oluşturmalıyız. Örneğin:\u003C/p>\u003Cpre>\u003Ccode><button id=\"menu-toggle\">Menüyü Aç/Kapat</button>\n<nav id=\"menu\" style=\"display:none;\">\n  <ul>\n    <li>Anasayfa</li>\n    <li>Hakkımızda</li>\n    <li>İletişim</li>\n  </ul>\n</nav>\u003C/code>\u003C/pre>\u003Cp>Burada, \u003Ccode>menu-toggle\u003C/code> id'sine sahip buton menüyü açıp kapatacak, \u003Ccode>menu\u003C/code> id'sine sahip \u003Ccode>nav\u003C/code> ise menü içeriğini barındıracak. Başlangıçta menü gizli (display:none) olarak ayarlanmıştır.\u003C/p>\u003Ch3>2. JavaScript ile DOM'a Erişim\u003C/h3>\u003Cp>Şimdi, butona tıklama olayını yakalayıp menünün görünürlüğünü değiştirecek kodu yazalım:\u003C/p>\u003Cpre>\u003Ccode>const menuToggle = document.getElementById('menu-toggle');\nconst menu = document.getElementById('menu');\n\nmenuToggle.addEventListener('click', function() {\n  if (menu.style.display === 'none') {\n    menu.style.display = 'block';\n  } else {\n    menu.style.display = 'none';\n  }\n});\u003C/code>\u003C/pre>\u003Cp>Burada, \u003Cstrong>DOM\u003C/strong> üzerinden buton ve menü elemanlarına erişiyoruz. Butona her tıklandığında, menünün \u003Ccode>display\u003C/code> stili kontrol edilip, görünürlük değiştiriliyor.\u003C/p>\u003Ch3>3. Stil ve Kullanıcı Deneyimi\u003C/h3>\u003Cp>Menünün açılıp kapanması sırasında daha şık bir geçiş efekti eklemek isterseniz, CSS ile \u003Ccode>transition\u003C/code> özelliğini kullanabilirsiniz:\u003C/p>\u003Cpre>\u003Ccode>#menu {\n  display: none;\n  transition: max-height 0.3s ease-out;\n  overflow: hidden;\n  max-height: 0;\n}\n\n#menu.show {\n  display: block;\n  max-height: 200px; /* Menü yüksekliğine göre ayarlayın */\n}\u003C/code>\u003C/pre>\u003Cp>JavaScript kodunu da buna göre güncelleyebilirsiniz:\u003C/p>\u003Cpre>\u003Ccode>menuToggle.addEventListener('click', function() {\n  menu.classList.toggle('show');\n});\u003C/code>\u003C/pre>\u003Cp>Bu yöntemle, menü açılıp kapanırken daha yumuşak bir animasyon elde edilir.\u003C/p>\u003Ch2>Başlangıç Seviyesi İçin İpuçları\u003C/h2>\u003Cul>\u003Cli>\u003Cstrong>DOM\u003C/strong> elemanlarına erişirken \u003Ccode>getElementById\u003C/code>, \u003Ccode>querySelector\u003C/code> gibi yöntemleri öğrenin.\u003C/li>\u003Cli>Olay dinleyicileri (\u003Ccode>addEventListener\u003C/code>) ile kullanıcı etkileşimlerini yakalamayı pratik yapın.\u003C/li>\u003Cli>CSS ve JavaScript arasındaki ilişkiyi kavrayarak stil değişikliklerini nasıl yapacağınızı öğrenin.\u003C/li>\u003Cli>Kodunuzu küçük parçalara bölerek, her adımı test edin ve anlamaya çalışın.\u003C/li>\u003C/ul>\u003Ch2>Sonuç\u003C/h2>\u003Cp>\u003Cstrong>DOM manipülasyon\u003C/strong>u kullanarak \u003Cstrong>menü açma kapatma\u003C/strong> işlevi oluşturmak, \u003Cstrong>JavaScript\u003C/strong> öğrenen herkes için temel ve önemli bir beceridir. Bu mini proje sayesinde, hem \u003Cstrong>DOM\u003C/strong> yapısını daha iyi anlayabilir hem de kullanıcı etkileşimlerini yönetme konusunda deneyim kazanabilirsiniz. Başlangıç seviyesindeki geliştiriciler için bu tür projeler, gerçek dünya uygulamalarına hazırlık açısından büyük fayda sağlar.\u003C/p>\u003Cp>Eğer kod snippetleri ve başlangıç seviyesi rehberler arıyorsanız, \u003Cstrong>Başlangıç Seviyesi Kod & Snippet Rehberi\u003C/strong> size bu konuda destek olabilir. Bu tür basit ama etkili projelerle JavaScript bilginizi geliştirebilirsiniz.\u003C/p>","2026'da Yazılım Öğrenme Rehberi: Kodlama Yapısı Örnekleri ve Kolay Öğrenme İpuçları","JavaScript ile DOM manipülasyonu kullanarak basit menü açma kapatma işlevini öğrenin. Başlangıç seviyesi için adım adım rehber.","DOM, manipilasyon, menue acma kapatma, JavaScript, baslangic seviyesi, kod snippetleri, rehber","dom-manipulasyonuyla-menu-acma-kapatma-baslangic-seviyesi-javascript-rehberi","2026-03-29T01:54:06.000Z",{"id":16,"title":17,"slug":18},219,"JS Event ve DOM Mini Projeleri","js-event-dom-mini-projeleri",{"id":20,"name":21,"nickname":22,"slug":23},94,"Caner Şimşek","CodeSprout","caner-simsek","/media/blog/4f72cbb2ea6653a32590c28979f1ff7b.jpg","/media/blog/4f72cbb2ea6653a32590c28979f1ff7b_thumb.jpg","/media/blog/4f72cbb2ea6653a32590c28979f1ff7b.webp","/media/blog/4f72cbb2ea6653a32590c28979f1ff7b_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},3,548,0,"3 dk okuma süresi","/blog/js-event-dom-mini-projeleri/dom-manipulasyonuyla-menu-acma-kapatma-baslangic-seviyesi-javascript-rehberi",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/4f72cbb2ea6653a32590c28979f1ff7b.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/js-event-dom-mini-projeleri/dom-manipulasyonuyla-menu-acma-kapatma-baslangic-seviyesi-javascript-rehberi",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/js-event-dom-mini-projeleri/dom-manipulasyonuyla-menu-acma-kapatma-baslangic-seviyesi-javascript-rehberi",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/caner-simsek",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,112],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":30,"name":17,"item":111},"https://kodogreniyorum.com/blog/js-event-dom-mini-projeleri",{"@type":102,"position":113,"name":7,"item":65},4]