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ı ;
|
1 2 3 4 5 6 |
body{background: #4C93B3;} .kalip{width: 990px; height: 250px; margin:300px auto; } .kalip ul{width: 990px; background: #fff; height: 50px;} .kalip ul li { float:left; list-style: none; margin-top: 10px;} .kalip ul li a{border:1px solid aqua; padding: 5px;background: #333; color:#e2e2e2; text-decoration: none; display:block; font-size: 18px;} .kalip ul li a:hover{border:1px solid fuchsia;} |
Html kodları ;
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="kalip"> <ul> <li class="hihi"><a>Atatürk Köşesi</a></li> <li class="hihi"><a>Ana Sayfa</a></li> <li class="hihi"><a>Webmaster</a></li> <li class="hihi"><a>Php</a></li> <li class="hihi"><a>jQuery Ajax Javascript</a></li> <li class="hihi"><a>Css</a></li> <li class="hihi"><a>uzaaaa a a a a a</a></li> </ul> </div> |
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ı ;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(document).ready(function(){ var sayi = $('.hihi').size(); var toplam = 0 ; for(i=0;i<sayi;i++){ var deger = $('.hihi').eq(i).width(); toplam = toplam + deger } var kalanDeger = Math.round(((990- toplam)/i)/2); alert('margin-left: ' + kalanDeger + ' olarak atanacak'); $('.hihi').css({ 'margin-left' : kalanDeger, 'margin-right' : kalanDeger }); }); |
jQuery kodlarını adım adım açıklıyorum
|
1 |
$(document).ready(function(){ ..... }); |
Sayfa yüklendiğinde
|
1 |
var sayi = $('.hihi').size(); |
Sayi adında bir değişken oluştur ve class’ı ‘hihi’ olan li taglarının sayısını bul.
|
1 |
var toplam = 0 ; |
Toplam adında bir değişken oluşturduk ve 0 değerini atadık.
|
1 |
for(i=0;i<sayi;i++) { } |
Kaç tane li tagı varsa for döngüsüne bunu belirttik.
|
1 |
var deger = $('.hihi').eq(i).width(); |
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)
|
1 |
toplam = toplam + deger |
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.
|
1 |
var kalanDeger = Math.round(((990- toplam)/i)/2); |
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)
|
1 |
alert('margin-left: ve margin-right: ' + kalanDeger + ' olarak atanacak'); |
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.
|
1 2 3 4 |
$('.hihi').css({ 'margin-left' : kalanDeger, 'margin-right : kalan Deger }); |
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.
Çözümü buLmuşuz, emeğine sağLık kardeşim 🙂
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.
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…
Teşekkür ederim Hasan.
Liste şeklinde olmayan menüyü jquery kullanmadan ortalayabilirmiyiz?