Pure CSS3 Fade In Dropdown Menu

Artık web projelerinde mümkün olan tüm animasyonlar için CSS3 geçişlerini kullanıyoruz (CSS3 Transitions). Eğer IE8 ve 9 için destek vermemiz gerekirse, Modernizr ve jQuery kullanarak fallback uyguluyoruz. Ben bu örnekte fallback olayına girmedim fakat tekrar fırsat bulduğumda yazıyı güncelleyeceğim.

Yazının konusu olan, sadee CSS3 kullanarak fade in menu yapmanın püf noktasını geçtiğimiz günlerde, Barcin.com’u kodlarken tam olarak kavradım. Aylardız zaten CSS3 menü kullanıyordum fakat bunu Javascript ile menü elemanlarına mouseenter/mouseleave anında class vererek/kaldırarak yapıyordum ve timeout kullanmam gerektiği için de %100 verimlilikte çalışmıyordu. Şimdi sizinle paylaşacağım ipucu sayesinde, Javascripte gerek kalmadan, menünüzü sadece CSS3 kullanarak stabil bir şekilde çalıştırabileceksiniz.

Öncelikle aşağıdaki örneği inceleyiniz. Tam ekran versiyonuna ulaşmak için buraya tıklayabilirsiniz.

Burada özellikle dikkat etmeniz gereken iki bölüm var:

.subnav {
  width: 200px;
  
  position: absolute;
  left: 0;
  top: -5000px;

  opacity: 0;
  @include transition(opacity 0.3s ease-in-out 0.2s, top 0s ease 0.5s);
}

.has-subnav {
  position: relative;
  &:hover {
    .subnav {
      top: 100%;
      opacity: 1;
      @include transition(opacity 0.3s ease-in-out 0.3s, top 0s ease 0.3s);
    }
  }
}

Fark ettiniz mi?

İşin sırrı delay!

İşin sırrı transition özelliğinin 4. parametresi olan delay değerinde.

Biz en başta menü elemanımızı 5000px yukarı çekiyoruz. ‘hover’ anında ikinci bölüm devreye girdiği için top özelliğinin bekleme süresi sıfır oluyor ve menümüz olması gereken yere hemen geliyor, opacity özelliğinin bekleme süresi de 0.3s olduğu için 0.3s sonra da fade-in animasyonumuz başlıyor. ‘hover’dan çıkıldığı anda da birinci yani ön tanımlı (default) kısım devreye girdiği için opacity özelliğinin bekleme süresi 0.2s, top özelliğinin bekleme süresi de 0.5s oluyor. Böylece menümüz 0.2s bekledikten sonra 0.3s süreyle fade-out animasyonumuzu tamamlıyor ve top özelliği de tam fade-out animasyonumuz tamamlandığında, yani 0.2 + 0.3 = 0.5s sonra menüyü olması gereken yere, 5000px yukarıya gönderiyor.

Umarım bu bilgi, sizin için faydalı olmuştur.