CSS Transition Kullanım Hatası

feneresevdalı dedi:

Animasyon kısımları JS'ye giriyordu sanki. Web programlamaya epey uzak kaldım. Bir JS kodu var mı diye bakabilir misiniz?

Genişletmek için tıkla...

efehanarslan dedi:

Herkese merhaba, kendi web sitem için bir tasarım yapıyordum fakat çözüme bir türlü kavuşturamadığım sorunum var.

HTML:Panoya kopyala

 <nav>
 <ul class="nav__links">
 <li><a href="#">Lorem Ipsum <i class='bx bx-chevron-down'></i></a>
 <div class="dp-content">
 <a href="#">Lorem Ipsum</a>
 <a href="#">Lorem Ipsum</a>
 <a href="#">Lorem Ipsum</a>
 <a href="#">Lorem Ipsum</a>
 </div>
 </li>
 <li><a href="#">Lorem Ipsum <i class='bx bx-chevron-down'></i></a></li>
 <li><a href="#">Lorem Ipsum</a></li>
 <li><a href="#">Lorem Ipsum</a></li>
 </ul>
 </nav>

Bu şekilde bir: Hover ile çalışan açılır bir menü yaptım ve CSS düzenlemesini aşağıda ki gibi ayarladım.

CSS:Panoya kopyala

ul li .dp-content {
 display: none;
 position: absolute;
 background-color: #0D0D14;
 margin: 20px 0px 0px 25px;
 padding: 15px 45px 15px 25px;
 border-radius: 10px;
}
.dp-content a {
 padding: 10px 0px;
}
ul li:hover .dp-content{
 display: flex;
 flex-direction: column;
}

Bu içeriği görüntülemek için üçüncü taraf çerezlerini yerleştirmek için izninize ihtiyacımız olacak.
Daha detaylı bilgi için, çerezler sayfamıza bakınız.

Üçüncü taraf çerezlerini kabul et

https://giphy.com/GTCJhPUR7S5rS8Y5MB

Bir türlü kod içerisinde transition elemanının nasıl kullanılacağını çözemedim. Sadece kapanmadan 1 saniye kadar daha durmasını ve menü içerisine geldiğimde kapanmamasını istiyorum.

Genişletmek için tıkla...

efehanarslan dedi:

Bir türlü kod içerisinde transition elemanının nasıl kullanılacağını çözemedim. Sadece kapanmadan 1 saniye kadar daha durmasını ve menü içerisine geldiğimde kapanmamasını istiyorum.

Genişletmek için tıkla...

$(".dp-content").fadeOut(1000, function() {
    $(".dp-content").hide();
});

oynozan dedi:

Javascript kullanıp geçin bence. Bahsettiğiniz kapanma animasyonu JQuery ile şöyle yapılabilir:

JavaScript:Panoya kopyala

$(".dp-content").fadeOut(1000, function() {
    $(".dp-content").hide();
});

Javascript kullanmak istemiyorsanız @keyframe'leri incelemenizi öneriyorum. Zira şuan ben bile şuan anlatmaya üşendim. Eğer siz de üşeniyor ve hala Javascript kullanmamak istiyorsanız .dp-content'e tepeden negatif margin verin, menü item'a hover ettiğimiz an mouse imleci dropdown menüsünün sınırları içerisinde kalacağından aşağı kaydırırken kapanmaz.

Genişletmek için tıkla...

Fatalis dedi:

Sorun üstüne gelince bile dropdown'un kapanıyor oluşuysa JavaScript olmadan da çözülebilir bu, muhtemelen yapıda bir hata vardır çünkü sorunsuz bir dropdown tasarımında bu tarz bir hata olmaz.

Menüdeki li nasıl bir yapıda?

Genişletmek için tıkla...