Rehber HTML, CSS ve JS ile açılır kapanır menü yapımı

HTML, CSS ve JS ile açılır kapanır menü yapmak oldukça kolay bir işlem. Bilmeniz gerekenler classList.toggle ve getElementById methodu ve addEventListener ile event ekleme. Gerisi tamamen CSS işlemleri.

CSS ile yapacağımız işlem menü open classına sahipse transform özelliğini sıfır yapmak.

Kodların her şeyi açıkladığını düşündüğüm için pek detaya girmeyeceğim. Karışık bir işlem değil. Sorularınız olursa bu konunun linkini ekleyip, beni etiketleyerek konu açabilirsiniz.

Kodları Drive'a yüklüyorum. Aynı zamanda canlı önizleme için JSFiddle linki de bırakıyorum.


 
Son düzenleme:
Hocam cahilliğime verin ama imzanızdaki " Full stack designer " cümlesi doğru bir cümle mi?
Web sistemleri geliştirilmez, aynı zamanda tasarlanır da. Yazılım mimarisi diye apayrı bir konu var. Firmanın amaçlarına uygun sistemlerin back-endini de tasarladığım için bu şekilde bir terim kullandım. Tabii yine de daha düzgün ifade edilebilir.
 
Web sistemleri geliştirilmez, aynı zamanda tasarlanır da. Yazılım mimarisi diye apayrı bir konu var. Firmanın amaçlarına uygun sistemlerin back-endini de tasarladığım için bu şekilde bir terim kullandım. Tabii yine de daha düzgün ifade edilebilir.

Benim bildiğim front-end developer var, back-end var bir de full stack ikisini birden bilen var ama full stack designer yazınca benim de bir garibime gitti.
Ben de şu anda HTML öğreniyorum yakında CSS'nin sırası gelecek bir öneriniz var mı (öğrenme süreci için)?
 
Benim bildiğim front-end developer var, back-end var bir de full stack ikisini birden bilen var ama full stack designer yazınca benim de bir garibime gitti.
Tasarım kavramı yalnızca görsel olarak kullanılmıyor yazılımda. Yazılımı da tasarlayabilirsin. UML diyagramlar kullanarak da çok şey ifade edebilirsin. Yazılım ya da geliştiricilik oturup sadece kod yazmak değil.

Ben de şu anda HTML öğreniyorum yakında CSS'nin sırası gelecek bir öneriniz var mı (öğrenme süreci için)?
İkisini birden götürmen daha doğru olur. Sadece HTML eksik kalıyor. HTML ve CSS'i birlikte öğrenmen gerek. Öğrenme süreci ile ilgili forumda birçok konu açıldı onlara bakabilirsin.
 
Tasarım kavramı yalnızca görsel olarak kullanılmıyor yazılımda. Yazılımı da tasarlayabilirsin. Uml diyagramlar kullanarak da çok şey ifade edebilirsin. Yazılım ya da geliştiricilik oturup sadece kod yazmak değil.

İkisini birden götürmen daha doğru olur. Sadece HTML eksik kalıyor. HTML ve CSS'i birlikte öğrenmen gerek. Öğrenme süreci ile ilgili forumda birçok konu açıldı onlara bakabilirsin.

Ama satın aldığım kurs HTML başlıyor öğretip CSS'ye geçiyor az kaldı zaten.
 
Ama satın aldığım kurs HTML başlıyor öğretip CSS'ye geçiyor az kaldı zaten.
Bu durum ile yeni konu aç lütfen. Daha fazla yardım bulabilirsin. Satın aldığın her kurs doğru eğitim verecek diye bir durum yok.

Önce HTML öğretmek olay bütünlüğü açısından iyi bir teknik değil.
 
Ellerine sağlık. Kısa kodlar için Jquery kullanmak yerine Vanilla JavaScript kullanılabilir.
JavaScript'e de çevireyim dedim :)

JavaScript:
let flyToggleButton = document.querySelector("#flyToggleButton");
let flyMenu = document.querySelector("#flyMenu");

flyToggleButton.addEventListener("click", (e) => {
  e.preventDefault();
  flyMenu.classList.toggle("open");
})
 
Ellerine sağlık. Kısa kodlar için Jquery kullanmak yerine Vanilla JavaScript kullanılabilir.
JavaScript'e de çevireyim dedim :)
Evet, mantıklı. Linki güncelledim. Madem JQuery'yi bıraktık. Şunu da ekleyeyim. getElementById methodunun benchmarkı querySelector methodundan daha hızlı. Onu kullanmak daha proper yöntem olacaktır.
 

Yeni konular

Geri
Yukarı