CSS :focus-within ile Açılır/Kapanır Alanlar Yapmak

Bu ders Tayfun Erbilen tarafından prototurk.com için hazırlanmıştır.
Kanala destek olmak için KATIL üzerinden size uygun seçeneği belirleyerek desteğinizi gösterebilirsiniz.
/ @prototurkcom
Yeni çıkardığım PHP Eğitim Setime gözatın!
udemy.com/php-egitim-seti/?co...
-- Sosyal Hesaplarım;
/ erbilennet
/ prototurkcom
/ tayfunerbilen
/ prototurkcom
/ tayfunerbilen

[@PROTOTURKCOM]

Videoyu bitirdikten sonra ios mobil cihazda test edeyim dedim, orada bir focus problemi olduğunu fark ettim. O yüzden en kötü ihtimalle bu problemi yaşarsanız mobil için buttonlara onclick="this.focus()" eklemeniz yeterli olacaktır, bu da ek bir detay olarak kalsın burada.
Not: Günde 1 ya da hafta 1 iyi gelir :D

[@ceriyorsince6217]

Hocam Allah razı olsun bu çok hoşuma gitti ve deneye deneye cssim gelişti resmen 😂 ve şöyle bir biçime getirdim en son etiketlerin üzerine binmeden nazikçe itiyor şeklinde yaptım denemek isteyenler için kod yapısını bırakıyorum
Html:
Button

list2
list3
list4
list5
list6
list7

Css:
.box{
width: 200px;
position: relative;
}
.box button{
display: block;
width: 70%;
padding: 10px 0;
margin: auto;
}
.box nav{
width: 100%;
border: 1px solid black;
transition: 1s all;
position: static;
}
.box nav .list{
width: 100%;
text-align: center;
padding: 10px 0;
}
.box nav .list:hover{
background-color: #9035d2;
}
.box:not(:focus-within) nav{
transform: scale(0);
transform-origin: top;
position: absolute;
}

[@osmantalayhan]

Abi içeriklerin efsane devamını bekliyoruz 🖤

[@emirhanwsd]

abi aktif olarak içerik üretmen harika
bu arada unutmadık reklamlara tıklamayı 😄

[@muratsarinet]

Videolarınızı her izlediğimde şaşırıyorum. Teşekkür ederim. Çok faydalı oldu

[@emir.siriner]

Eline emeğine sağlık kardeşim. Cidden büyük kolaylık oldu bu. Çünkü hem javascript yazmıyorsun hem de görünümle istediğin gibi oynayabiliyorsun. Tamamen CSS... Başka ne isterim ki... Teşekkürler paylaşım için. Selamlar...

Çok Harika Olmuş. Emeğinize Sağlık. kafamdaki sorulara cevapları buldum...

[@abdullah2207]

Güzel video, teşekkürler.

[@sadiqmsc476]

çok yararlı video olmuş teşekkürler

[@ogulcanodemis8355]

yarın izlicem kalsım burda

[@gardrop6598]

Büyük adamsın sen.Hocamsın.

[@mehmetcaneraslan4684]

kral elıne emegıne saglık cok ııyıymıs sende cok guzel anlatmıssın

[@berkaybakacak]

Elinize sağlık 😁

[@elgunhesenovi3136]

Azernaycandan izliyorum devam abi

[@muratdemrel06]

elinize sağlık, faydalı bir içerik olmuş. sanırım tek eksisi butona tekrar basma olayında kapanmaması. bunu da butonla aynı yerde durup butonla aynı görünen ama sadece dropdown açıkken görünen bir label ile çözebiliriz sanırım. tabi bu label görünürken butonu da gizlemek gerekir :)

[@theaxacall]

Great...

[@webdevelopment3721]

Hocam ben bunu checbox ile yapiyordum 😄

[@PROTOTURKCOM]

checkbox ile ben de çok alternatifini yaptım ancak bu dışarı tıklama olayını yönetmek çok daha kolay olduğu için bu gibi durumlarda bence daha doğru kullanım olur :)

[@tupac0199]

Reis Devammkeeeee

[@berkayfelix0]

bu kadar fazla video gelcekse ben hergün tıklarım linklere

[@benno3406]

😁😁

[@f_erbey]

Ben de neden o kadar kadar formama rağmen çalışmıyor diyordum. Meğer tabindex vermen gerekiyormuş

[@benno3406]

Detail summary etiketi var github da o kullanılmış :) no css no js

[@PROTOTURKCOM]

ya misal olsun diye öyle dedim zaten, detail summary i ayrı bir videoda göstericem

[@mustafaeskin280]

Hocam koltuğun marka model nedir? Önerir misiniz ?

[@PROTOTURKCOM]

xdrive 1453, yeni aldım açıkçası ama genel olarak memnunum :)

[@barbarossas.7448]

Hocam şu Responsive olayının altından kalkamıyorum, eminim ki çoğu kişi de bu sorunu yaşıyordur, bi el atın artık şu soruna :)

[@PROTOTURKCOM]

notlarımı hazırlıyorum çekicem onunla ilgili bir ders :)

[@huseyincuma9523]

Ee abi outro nerde ya

[@PROTOTURKCOM]

az dinleneyim sonra yine devam :D

[@huseyincuma9523]

@@PROTOTURKCOM :)

[@furkanbilici6720]

Disslike atanın adresini bulabilir misin hocam bana

[@PROTOTURKCOM]

bazen ben de merak etmiyor değilim :)