Rehber HTML, CSS ve JS ile sekmeli içerik yapımı

Tab menüler çok kolay bir mantığa dayanıyor. İşin özü görünen elemanı display: none yapıp görünecek elemanı da display: block yapmak.

Görünecek elemanı da a etiketinin href'ine yazdığımız eleman id'sinden buluyoruz.

Güzel görünmesi için de birkaç CSS yazmak gerek tabii ki.

Ben biraz karmaşıklaştırmak için kapanan elemanın kayarak gideceği bir efekt yapmak istedim. Kodlar her zamanki gibi JSFiddle'da.

Tab Example - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
jsfiddle.net jsfiddle.net
 
Son düzenleme:
Genişletmek için tıkla...
Peşpeşe tıklanınca bu şekilde kalmakta, ama güzel bir örnek.
1615671669650.png
 
Aslında amaç efekt değil olayın mantığını anlatmaktı. Efekti koyabilmek için temel bir kod örneği verdim sadece. Daha güzelini sizlerden bekleriz :D
ihydrogeni dedi:
Peşpeşe tıklanınca bu şekilde kalmakta, ama güzel bir örnek.
Genişletmek için tıkla...
setTimeout kaynaklı bir sorun, düzelttim. Giriş seviyesinde efekti başka nasıl anlatacağımı bulamadım. Normalde bu iş için animate.css daha mantıklı olur.
Evilmonster dedi:
Efekt istiyorsanız çözümü basit, transition değeri verin.
Genişletmek için tıkla...
transition display: none ve block için işe yaramaz. İstersen yine de deneyebilirsin, görmüş olursun.
 
ihydrogeni dedi:
Artık pek klasik JS yazan kalmadı, daha farklı JS dillerine yönelin. Örnek olarak VueJS verebilirim, en azından ben bunu kullanıyorum.
Genişletmek için tıkla...
VueJS biliyorum ama olayı anlatırken pure JS veya JQuery ile eski dilden anlatmak bana daha mantıklı geliyor. Bir şeyi öğrenirken her zaman temelden başlanmasını tavsiye ediyorum. Öbür türlü balıklama atlanıldığı zaman kalıcı olmuyor. Aslında bizim nesil bu işe başlarken avantajlıydık çünkü yeni frameworkler yoktu ve temelden öğrendik. Şu an öğrenenlerde bir kafa karışıklığı oluyor.
 
Uyarı! Bu konu 5 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

Benzer konular

Berkay Davas
  • Makale
Rehber  HTML, CSS ve JS ile açılır kapanır menü yapımı
2
Mesaj
12
Görüntüleme
5.176
Berkay Davas
Berkay Davas
Umutyore
HTML, CSS ve JS mobil menu çalışmıyor
Mesaj
8
Görüntüleme
796
RaSGooL
RaSGooL
Berkay Davas
Sadece HTML ve CSS ile sekmeli içerik yapımı
2
Mesaj
11
Görüntüleme
1.996
300319
3
bilmiomyav
HTML, CSS, JS hızlı öğrenme yolları nelerdir?
Mesaj
3
Görüntüleme
337
RaSGooL
RaSGooL
S
  • Soru
HTML, JS ve CSS nasıl öğrenilmeli?
Mesaj
5
Görüntüleme
2.110
Baldi
Baldi

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı