Katlanarak açılan div tasarımı

0
237
views

katlanarak

Bu  zamana  kadar  görmeye  pek  alışık olmadığım bir menu  örneği.  Giuseppe Gerbino tarafından sadece Css3 kullanılarak hazırlanmış bir  örnek ve sanırım  bir  benzeri  şimdilik  yok. Drop  down açılır  kapanır  menüleri bilmeyen yoktur.  Bir  ana kategori  linki ve ana kategori  linki  altında  aynı mantık ama  farklı  kategorilere  açılan alt  linkler  diyebiliriz  buna.

Genellike  drop  down olarak açılan alt  kategorilere  aynı  sınıf  uygulanır  ve bütün  linkerin  özellikleri de  aynı şekilde  olur.   Gazeteyi  katlayıp  sonra makasla  adam resmi  gibi kestikten sonra  gazete  açıldığında  el ele  tutan adamlar  oluşurdu.  Bu  örnekte alt  kategorilerin her  biri  için farklı  bir  sınıf  atanmış ve her sınıfın kendine  özgü hareketleri  bulunuyor. Bunun sonucunda gazete örneği  gibi  açılıp kapanan bir  menü oluşuyor.

Mouse  ile Navigation yazan butonun üstüne geldiğiniz anda  üstten aşağıya  doğru menüler  açılmaya başlıyor. Her ne kadar bir  menü benzeri  örnek  olarak hazırlanmış olsada bu tip bir  drop down  örneğini aklınıza gelebilecek her yerde  kullanabilirsiniz.  Arşivinizde bulunmasını kesinikle  önerdiğim örneklerden bir tanesi. Denemedim ama Css  ile  arka plan pozisyonlarını  ayarlayıp bir  resim ekleyebilirseniz eğer resimler için kullanılabilir  hoş bir efekt  elde  edebilirsiniz.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm. 

Css : 

 

  •  Body etiketleri arasına eklemeniz gereken bölüm. 

 

Html : 

 

1 oy (No Ratings Yet)
Loading...
Önceki İçerikMeny.js
Sonraki İçerikDropDown images
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Please enter your comment!
Please enter your name here