DropDown images

0
448
Görüntülenme

drop image

Giuseppe Gerbino tarafından hazırlanmış olan menü örneğini paylaşırken  bu özeliğin resimler  üzerinde  kullanılabileceği  hakkında  bir  fikir  belirtmiştim.  Hemen işe  koyulup  sizlere  menü örneğinin  resimler  için olan versiyonunu  hazırladım. Başlangıçta  düşündüğüm  örneği hazırlamak  için  çok fazla css kodu kullanmam gerekiyordu. Giuseppe Gerbino‘nun hazırladığı  örnekteki alt menüler  için kullandığı n1, n2, n3, n4, n5  sınıflarını a, b, c olarak elimden geldiği kadar sizler  için kısaltmaya ve kullanılabilir  bir hale getirmeye  çalıştım. Şimdilik  sadece a, b ve c  olmak  üzere üç tane aynı özelliklere  sahip  ama ayrı arkaplan resimleri  ekleyebileceğiniz sınıf  bulunuyor.  Eğer  daha fazla resim eklerseniz  daha  fazla sınıf eklemeniz gerekiyor.  A, b ve c  sınıfları  toplamda  5 basamaktan oluşuyor buna her resmin beş farklı  parçaya  bölündüğünü  söyleyebiliriz  ama sizin resim eklemek  için eşit oranlarda  beş parçadan oluşa resimler  oluşturmanız gerekmiyor.  A, b ve c  sınıflarının bağlı  olduğu .navigation li sınıfına  bir  arkaplan eklemeniz  yeterli olacaktır. Css’de kullandığım background-position  ile her  basamak için resmin farklı  pozisyonları gözüküyor. Buda resim  eklemede  iyi  bir  kolaylık oldu sizin için. Başlangıç olarak bilmeyenler  için biraz  fazla karmaşık görünebilir  ama iyice  css kodları  incelerseniz  ve a, b, c  sınıflarını  nasıl çoğalttığıma  dikkat  ederseniz  çok kolay bir  şekilde  sizde kendinize  göre  düzeleyebilirsiniz.

 Kullanım

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

Css : 

 

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

Html : 

CEVAP VER

Lütfen yorumunuzu yazın.
Lütfen İsminizi bu alana yazın.