jQuery ile UL içerisindeki LI taglarını ortalamak eq() , Math()

Yatay css menülerde statik yapı artık yetersiz kalınca dinamik yapı olan yani width:; değeri olmayan gerektiği kadar uzayabilen yapıya geçildi bu ilk zamanlar biraz canımı sıksada yazdığım kodların esnekliğini gördükçe çok hoş bir hal almaya başladı. Ama gene bir sorun vardı Lİ taglarını ortalamak boyutu belirli olmayan bir tag margin:0px auto; ile ortalanmıyor tek çözüm margin değeri vermek ama o zamanda Li tagının içeriniğinin ne kadar uzun olacağı belli olmadığı statik margin değeride veremiyoruz bu yüzden gene css ile yollarımız jquery de kesişiyor.

Çözüm bence jquery ile bütün li taglarının boylarını toplatmak , bir üstteki ul tagının width değerinden çıkartmak , çıkan sonucu 2 ye bölüp margin-left ve margin-right değeri olarak vermek.

öncelikle yatay bir css menümüzü oluşturalım.

Css kodları ;

 

Html kodları ;

 

Menü görüntüsü ;

Gördüğünüz gibi Li taglarımız yan yana ve ortalanmamış bir şekilde şimdi bu sorundan kurtulmak için jQuery yazmaya başlıyoruz.

Adım 1 : jQuery dosyamızı sayfamıza ekliyorum ediyoruz. Ben google serverlarında olan js dosyasını direk ekliyorum.

Adım 2 : tagları arasına jQuery kodlarımızı yazıyoruz.

jQuery kodları ;

 

jQuery kodlarını adım adım açıklıyorum

 

Sayfa yüklendiğinde

Sayi adında bir değişken oluştur ve class’ı ‘hihi’ olan li taglarının sayısını bul.

Toplam adında bir değişken oluşturduk ve 0 değerini atadık.

Kaç tane li tagı varsa for döngüsüne bunu belirttik.

Deger diye bir değişken oluşturduk ve içinede döngüde tekrarlanan li taglarının boylarını attık burada eq(i) i değeri kaçsa o li’ye ait olan özellikleri almamızda yardımcı oluyor. (eq() ayrıntılı bilgi)

Burada oluşturduğumuz toplam değerine döngü sırasına göre li taglarının boylarınını tek tek toplayıp atıyoruz.

Burada li taglarını kapsayan ul ‘un boyutundan topladığımız toplam değerini çıkartıp math.round fonskiyonu ile küsürlü çıkabilecek olan sayıyı yuvarlıyoruz ve 2 ye bölüyoruz.(math() ayrıntılı bilgi)

Burada ise margin-left ‘e ve margin-right’a atanacak değeri görmemiz için alert verdirdim. Sitenize dökerken bu alert satırını silin.

Burada ise son nokta olan elde ettiğimiz sayıyı .css fonksiyonu ile css’e atıyoruz.

Menümüzün ortalandıktan sonraki hali ;

Takıldığınız yerleri yorum yolu ile sorabiliriz.

“jQuery ile UL içerisindeki LI taglarını ortalamak eq() , Math()” üzerine 5 yorum

  1. Sırf bu konuda değil bir çok değerli konuda değerli makaleler veren bir web siteniz var. Ayrıca güncel konuları bulup web sitenizde yer vermekte ve bu sebepten dolayı bizim gibi internet takipçilerinin beğenisini kazanmaktasınız. Tüm emeği geçen arkadaşlara teşekkür ederiz.

  2. Bir çok konuda Türkçe kaynak sorunu yaşamaktayız. Özellikle jquery konusunda. Şu ana kadar rastlamadım belki, ama diyebilirimki en iyi Türkçe kaynak bu sitedir.

    Emeği geçen herkeze teşekkürü borç biirim…

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir