Dikey açılır menü
merhabalar, frontend ile pek bir işim olmadığından belki çok basit olan bir şeyi inanın şuan kafam basmıyor. Aşağıdaki yapıda bir tasarımım olacak;
<ul>
<li>Ders 1</li>
<ul>
<li>Ünite 1</li>
<ul>
<li>Konu 1</li>
<ul>
<li>Kazanım 1</li>
<li>Kazanım 2</li>
<li>Kazanım 3</li>
<li>Kazanım 4</li>
</ul>
<li>Konu 2</li>
<li>Konu 3</li>
</ul>
<li>Ünite 2</li>
<li>Ünite 3</li>
</ul>
<li>Ders 2</li>
<li>Ders 3</li>
</ul>
Yukarıdaki gibi bir yapıda, ekran ilk geldiğinde tüm Dersler kapalı olacak ve tıkladığım ders altındaki ünite alanları açılacak, Üniteye tıklayınca altındaki konu başlıkları açılacak, konuya tıklayınca da o konu altındaki kazanımlar gelecek. <ul><li></li></ul>
yapısında veya div yapısında olabilir hiç farketmez tek ihtiyacım olan bootsrap accordion yapısı gibi çalışması sadece tıkladığım alanın altında yer alan ilk bölüm açılsın istiyorum. Şimdiden teşekkürler.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
sadece css ile yapmak istersen;
<ul>
<li tabindex="0">
Ders 1
<ul>
<li tabindex="0">
Ünite 1
<ul>
<li tabindex="0">
Konu 1
<ul>
<li tabindex="0">Kazanım 1</li>
<li tabindex="0">Kazanım 2</li>
<li tabindex="0">Kazanım 3</li>
<li tabindex="0">Kazanım 4</li>
</ul>
</li>
<li tabindex="0">Konu 2</li>
<li tabindex="0">Konu 3</li>
</ul>
</li>
<li tabindex="0">Ünite 2</li>
<li tabindex="0">Ünite 3</li>
</ul>
</li>
<li tabindex="0">Ders 2</li>
<li tabindex="0">Ders 3</li>
</ul>
<style>
li ul {
display: none;
}
li:focus-within > ul {
display: block;
}
</style>
Teşekkürler bu kadar hızlı cevap için @tayfunerbilen. Yine hayat kurtardın.