jquery için arşiv

jquery 1.3.2 sürümünde check ve radio change olayı sorunu ve çözümü

Temmuz 5th, 2011 • Javascript, jquery

jQuery biz arayüz geliştiriciler için çok büyük bir yardımcı. Devamlı güncellenen jquery kütüphanesi bazı geniş çaplı sitelerde yeni sürüme geçmek o kadarda kolay olmuyor. Burada yaşadığımız sorun eski sürüm jquery kütüphanesinin bir problemine kütüphane güncellemeden çözüm üretmek olacak.

Sorun şu; chackbox veya radio butonlara atanan change olayının işlememesi, daha doğrusu ilk tıklamada değil ikinci tıklamada çalışması ve bu sorunun sadece Internet Explorer sürümlerinde(6,7,8) meydana gelmesi.

Çözüm için yapmamız gerekn çok basit

$("#fatih").click(function() { this.blur(); });

Aslında yaptığımız input alanından focus’u kaldırmak oldu. Evet belki pek işinize yaramıyacak ama benim gibi çok arayan bir kişi buradan yararlansa yeter.

Kaynak

Jquery holdReady() fonksiyonu

Mayıs 10th, 2011 • 4 yorum Javascript, jquery
Etiketler: , ,

Jquery son sürümü 1.6 çıktı. Dokümanları incelerken gözüme holdReady() fonksiyonu takıldı.

Jquery holdReady fonksiyonu document.ready olayını tutar veya devam etmesini sağlar. Boolean(true / false) tipi değer döndürür. true değeri dönerse document.redy olayını tutar, false değeri gelirse bırakır ve document.ready olayı gerçekleşir.

document.ready olayı DOM yüklenir yüklenmez devreye girer. Ancak bazen öyle durumlar olur ki DOM’un yüklenmesini beklemeden yüklememiz gereken javascript dosyaları veya referans aldığımız eklenti dosyaları olur, bu gibi durumlarda araya girip bu dosyaları yükletmemiz gerekir ve sonra işleyişi devam ettirmemiz gerekir. İşte bu gibi durumlarda holdReady fonksiyonu kullanılabilir. 

$.holdReady(true); // biraz bekle
$.getScript("myplugin.js", function() { // dosyayi yukledik
     $.holdReady(false); // simdi sen isine donebilirsin
});

Bu metot <head> içinde document.ready olayından önce çağrılmalıdır. Eğer sonrasında çağrılırsa işlevsiz kalır. En iyi kullanım yeri jquery kütüphanesi eklendikten sonrasıdır.

Küçük bir örnek yapalım;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
<script>
$.holdReady(true); // durdur
$.getScript("deneme.js", function() { // yukle
	$("p").css("background-color", "#f00");
     $.holdReady(false); // devam et
});

$(document).ready(function(e) {
    $("p").css("background-color", "#9C6");
	alert("iki");
});
</script>
</head>

<body>
<p>Deneme.</p>
</body>
</html>

Eklediğimiz deneme.js

// ilk yüklenecek dosya
$("p").css("background-color", "#ff0");
alert("bir");

Örneği görmek için tıklayınız.

Sayfa yükleme sırası;

1- DOM yani yukarıdaki sayfa <p>Deneme.</p> ve deneme.js dosyası birlikte yorumlanacak. (bir)

2- Sonrasında yükleme sonrası işlemler yapılacak. (iki)

3- $.holdReady(false); sonrasında document.ready içerisindeki kod yorumlanacak. (üç)

Son olarak bir not: birden fazla holdReady kullanımı halinde document.ready olayı tüm holdReady fonksiyonlarının bırakılmasını bekler.

Kaynaklar

Jquery Geliştiricileri için Güzel Bir FireBug Eklentisi FireQuery

Ocak 13th, 2011 • 2 yorum Javascript, jquery

Firefox’un eklentisi FireBug’ı bilmeyeniniz yoktur. FireBug öyle büyük bir eklenti ki onun üzerine kurulan birçok eklentiler var. Bu eklentide FireBug yeteneklerini geliştirmek için kullanılan bir eklenti.

Bu eklenti jQuery ile kod yazarken çok işimize yarayacak. Bu eklenti sayesinde FireBug’ın CSS yeteneklerine yakın bir çözümü jQuery üzerinde sağlayacağız. FireBug bize CSS açısından belirlediğimiz nesneye uygulanan css özelliklerini yakalama ve hangi css dosyasının hangi satırında olduğu gösterir. Benzer bir özelliği FireQuery bize sağlar.

Bu eklentide jQuery ile etkilediğimiz elemanlar hakkında benzer bir bilgi veriyor bize. Jquery ile etkilenen elemana hangi işlev ile etki yaptığımızı ve hangi fonksiyon ve kod ile etki ettiğimiz gösteriyor.

jQuery bulunmayan sayfalarda da jquery kütüphanesini ekliyor. Böylelikle her sitede FireBug özelliklerini jQuery yardımı ile kullanma imkanı sunuyor bize.

jQuery Data verileri Gösterir

Eklentiyi kurduktan sonra Firebug’ı açarız ve HTML sekmesine geliriz. Aşağıdaki bir pencere ile karşılaşırız.

jQuery data kullanarak web sitesine gömdüğümüz verileri gösterir bize. Bu durum dinamik olarak eklediğimiz jQuery verilerini kontrol ederken çok işimize yarar.

Bir Elemana Atanmış Fonksiyonları Gösterir

Test sayfasında h1 elemanına tanımlana aşağıdaki fonksiyon kodunu görüyoruz.

$('h1').bind('click', function() {
$(this).css('background-color', '#fee');
});

Bu tanımı FireBug HTML sekmesinde FireQuery yardımı ile aşağıdaki gibi görürüz.

Bir elemana tanımlanmış fonksiyonları bulmaya yarar. Süper bir özelliktir bu. Tanımlana fonksiyon konsolda yukarıdaki gibi görünür.

function() üzerine geldiğimizde bu elemena atama yapılan kodu ve satır numarasını gösterir. Bu bizi birçok yükten kurtaran süper bir özelliktir.

jQuery Olmayan Sitelere jQuery Ekleme Özelliği

Bir sitede jQuery kütüphanesi olmasa da bu eklenti etkin olduğu tarayıcılarda jQuery eklenmiş gibi olur. Bu sayede site üzerinde jQuery kolaylıklarını uygular ve sonuçlarını görebiliriz.

Bu sayede Konsolda jQuery kolaylıklarını kullanarak jquery eklenmemiş olsa da bu sitede jQuery varmış gibi rahat kod yazabiliriz.

Bu eklentiyi bana gösteren Orhan Ekici’ye ve ona gösteren Volkan Özçelik’e teşekkürler.

FireBug büyüksün.

Kaynaklar

jquery ipuçları – 4

Ekim 26th, 2010 • 7 yorum Javascript, jquery
Etiketler: , , , , , , ,

Jquery ipuçları – 1
Jquery ipuçları – 2
Jquery ipuçları – 3

1 – Mümkünse Class yerine Id kullanmayı tercih edin

jQuery ile kod yazarken bize çok büyük kolaylıklar kazandırır. Bunlardan bir tanesi elemana atanmış sınıfı yardımı ile kolayca seçebilme özelliğidir, ancak burada şöyle bir durum söz konusudur; jquery id ile atanmış elemanları normal javascriptteki gibi getElementById ile yakaladığı için daha hızlı çalışırken normal olarak sınıf ile yakalamalarda daha yavaş çalışacaktır.

Bu nedenle mümkün olduğunca seçicilerde id kullanmaya dikkat edilmelidir. Tabi bazı durumlarda sınıf kullanmak zorunda kalabiliriz o başka.


kaynak: net.tutsplus.com

2 – next() ve prev() kullanımı

Bu özelliklerin kullanımı bazen can kurtarıyor ancak kullanırken dikkat etmek lazım, bazende sorunlara yol açabiliyor. Sonradan eklediğiniz bir eleman sizin next ve prev kabullerinizi mahvedebiliyor

next() : next fonksiyonu bir sonraki elemanı yakalar. Sadece sonraki elemanı yakalar alt elemanlarını yakalamaz.

next fonksiyonu filtreleme özelliği vardır, yani next(‘li.secili’) tanımı ile en yakın bir sonraki secili sınıfı tanımlı li elemanını yakalayabiliriz.

Bir örnek verelim.

<ul>
    <li>Adana</li>
    <li>Ankara</li>
    <li class="secili">İstanbul</li>
    <li>İzmir</li>
    <li>Trabzon</li>
</ul>

Şeklindeki bir html kodundan

$('li.secili').next().css('border-bottom', '1px solid #999');

next() fonksiyonu yardımı ile bir sonraki elemanı yakalayabiliriz.

prev() : prev fonksiyonu bir önceki elemanı yakalar. Sadece önceki elemanı yakalar alt elemanlarını yakalamaz.

prev fonksiyonu filtreleme özelliği vardır, yani prev(‘li.secili’) tanımı ile en yakın bir onceki secili sınıfı tanımlı li elemanını yakalayabiliriz.

Bir örnek verelim.

<ul>
    <li>Adana</li>
    <li>Ankara</li>
    <li class="secili">İstanbul</li>
    <li>İzmir</li>
    <li>Trabzon</li>
</ul>

Şeklindeki bir html kodundan

$('li.secili').prev().css('border-bottom', '1px solid #999');

prev() fonksiyonu yardımı ile bir önceki elemanı yakalayabiliriz.

3 – Üst Eleman Bulma – parent(), parents() ve closest()

parent()

Bir üst elemanı bulma. Geriye bir adet üst eleman döndürür. 

    $('td.secili').parent().css('border-bottom', '#999');
    $('div').parent('.large').css('font-size', '14px');

İlk kod üst elemanı yakalarken, ikinci satırda ise seçme işlemini biraz daha daraltarak .large sınıfı tanımlı olan üst  elmanı yakala diyoruz.

parents()

Belirlenen elemanın tüm üst elemanlarını bulmaya yarar.

    $('li').parents().css('background-color', 'red');
    $('li').parents(&quot;ul&quot;).css('background-color', 'red');

İlk satır li’nin tüm üst elemanlarını yakalarken, ikinci satır li’nin tüm ul etiketli üst elemanlarını yakalar.

closest()

En yakın üst elemanı bulmak içindir. 

  $(document).ready(function()
    {
    $('li.urunler').closest('ul').css('background-color', 'red');
  });

HTML

<ul>
    <li>Üst Menü
        <ul>
        <li class="urunler">Ürün 1</li>
        <li class="urunler">Ürün 2</li>
        </ul>
    </li>
</ul>

İçiçe girmiş birçok listede yukarıdaki tanım ‘urunler’ sınıfı tanımlanmış öğenin ilk üst ul elemanını yakalamamıza yardım eder.

4 – Firebug ve console.log ile kodumuzu izlemek

Firebug’ın çalışma hayatımızdaki yerini biliyoruz. jquery ile hata yakalama amacı ile console.log kullanıyoruz. Daha önceleri javascript ile kod yazarken alert fonksiyonun çok kullanırdım. Şimdi aynı işi console.log yapıyor ancak popup çıkarıp bizi rahatsız etmiyor.

  var count = 0;
    while(count < 1000) {
    count++;
    console.log(count);
    setTimeout("takistHesapla";, 1000);
  }

yazın ve Firebug’ın console sekmesine bakın. Bu kod Chrome’da da çalışıyor.

Örneği görmek için tıklayınız. Tabi takistHesapla diye bieşy bulamadım diye size bin tane hata verecek oda gayet normal.

Bir uyarı işinizi yayına atarken bu satırı silin yoksa ie’de hata verir.

5 – Animasyon ve Efektleri Geciktirme (delay)

jQuery 1.4 ile birlikte gelen yeni bir özellik olan delay() animasyonlarımıza belli bir süre ara vermemizi sağlat, daha önceleri bu işi yapmak için setTimeout metodunu kullanıyorduk. 

$("div").fadeIn().delay(4000).fadeOut();

Örneği görmek için tıklayınız.

seçtiğimiz katmana fadeIn efekti ver ve sonra 4000 milisaniye bekle ve sonra fadeOut efekti ver diyoruz.

6 – has() Metodu

jQuery 1.4 ile birlikte gelen bir başka yeni özellik has() metodudur. Daha önceki sürümlerde :has seçicisi vardı, şimdi has() metodu ile daha kolay yakalama işi yapabileceğiz. 

<ul>
<li>list item 1</li>
<li>list item 2
    <ul>
    <li>list item 2-a</li>
    <li>list item 2-b</li>
    </ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

Yukarıdaki kodda alt menüsü olan li elemanını yakalamak için bu metodu kullanabiliriz.

$('li').has('ul').css('background-color', 'red');

Örneği görmek için tıklayınız.

Şeklinde altında ul etiketi olan li’leri ki burada bir tane var oda list item 2 içeriğine sahip olandır.

Kaynaklar

jQuery ipuçları – 3

Temmuz 1st, 2010 • 9 yorum Javascript, jquery
Etiketler: , , , , ,

Jquery ipuçları – 1
Jquery ipuçları – 2

jQuery ipuçlarını yayınlamaya devam ediyorum.

1- Dinamik oluşturulan elementlere live() ile olay atama

Sayfaya dinamik olarak eklenen içeriklerde veya ajax ile doldurduğumuz içeriklerdeki elemanlara bir olay atadığımızda(click, mouseover vd.) çalışmayacaktır. jQuery geliştiricileri bunun için live() fonksiyonunu geliştirmiş.

$('a.acilSusam').live('mouseover', function() {
 // yapilacak islemler
});

2 – Tarayıcı Penceresinin Boyutlarını Değişmesini Yakalamak

Belki ara sıra lazım olacak bir kod ama bazen gerekiyor işte. Pencere boyutu her değiştiğine bazı işlemleri yapmak sistemimizi yorabilir diye setTimeout yardımı ile belli aralıklarla bunu yaptırıyoruz.

function pencereBoyutuDegisti() {
	alert("Değişti");
};

var resizeTimer = null;
$(window).bind('resize', function() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(pencereBoyutuDegisti, 100);
});

3 – Element miktarını bulmak

Bir dokümanda seçilen elemandan kaç adet olduğu bulmak için;

	$('element').size();

4 – Bir elemanın index değerini bulmak

index değerini bulmanın farklı bir yolu 

$("ul > li").click(function () {
	var index = $(this).prevAll().length;
});

5- Bir elemanın görünür olup olmadığını yakalamak

if($(".eleman").is(":visible")) {
    alert('Burda');
}

6- Kaç tane alt elemanı(çocuk elemanı) var

<div id="foo">
<div id="bar"></div>
<div id="baz">
<div id="biz">
</div>
<span><span>
</div>

//kac tane alt elemanı oldugunu bulmak icin
$("#foo > div").length

7- jQuery Kopya Kağıdı(Cheat Sheet)

jQuery’nini bir çok özelliği var ve bunları aklımızda tutma imkanımız yok. Bir kopya kağıdı işimize yaraya bilir.

http://www.futurecolors.ru/jquery/

Burada son sürümün kopya kağıdı mevcut. Bende css3 özelliklerini kullanarak biraz renklendirdim. Benim renklendirdiğim(CSS3 içerir, herisi göremez)

8 – Select Elemanı ipuçları

// secili olan ögenin metnini almak
$("#myselect option:selected").text();

// secili olan ögenin degerini almak icin
$("#myselect option:selected").val();

// secili ogenin index degeri
$("#myselect option").index($("#myselect option:selected"));

// indeksi 2 olan ögeyi seçili hale getirmek
$("#myselect option:eq(2)").attr("selected", "selected");

Kaynaklar

Çok kolonlu yapılar ve çok kolonlu menüler

Mart 17th, 2010 • 23 yorum CSS, Javascript, jquery, Web Standartları, XHTML
Etiketler: , , , ,

Son zamanlarda bir çok yerde gözüme çarpan bir menü tipi var; iki kolonlu, üç kolonlu vb. menü tipleri. CSS ile en optimum şekilde bu menüyü nasıl yapabilirim diye araştırdım ve sizlerle paylaşmaya karar verdim. Konuyu inceledikçe çok kolonlu yapıların sadece menülerde değil site içeriklerinde de kullanabileceğimizi gördüm. İlk olarak yapının nasıl olduğunu göstereceğim, sonrada menüde nasıl kullanıldığını.

Web mecrası geliştikçe ihtiyaçlarımızda gelişiyor ve ihtiyaçlarımızı karşılayacak metotlar arıyoruz. Çok kolonlu yapılarda böyle bir metot aslında. Sitemizi kullanan insanlar genelde menü vb. erişim ve gezinti araçlarını kullanarak sitemizi dolaşırlar. Menü gibi gezinti araçları site yapısı düşünüldüğünde sayfamızın en önemli alanlarıdır. Bu alanları en iyi şekilde tasarlanması ve düşünülmesi sitemizi daha kullanışlı ve etkin hale getirecektir. 

Bu düşünceler ile bir çok web site geliştiricisi çeşitli yöntemler denedi ve denemeye devam ediyor. Kullanılabilirliği en üst düzeye çıkarmak için çeşitli metotlar üretilmektedir. Bence bunlardan en güzellerinden biridir çok kolonlu menüler.

Yatay ve dikey örneklerimiz olmasına karşın genelde yatay ve üst menüdeki örnekler daha kullanışlıdır. Kullanıcıya uzun menü alanlarına erişebilmek için kaydırma çubuğunu kullanırlar buda bizim için bir dezavantajdır. Çok kolonlu menüler bu gibi durumlardan bizi kurtarır. Sitemizi daha derli toplu gösterir.

Çok kolonlu menü örneklerini incelediğimizde belli başlı 2-3 yöntem ile oluşturulduğunu görürüz. Bunları aşağıda inceleyeceğiz. Projelerimizde çoklu menü kullanmaya karar verdiğimizde hangisi projemize uygun ise onu kullanacağız. 

Ayrıca javascript yardımı ile ve css3 yardımı ile de çoklu menü oluşturabiliriz bunlarıda göreceğiz.

Burada anlatacağımız metotlar sadece menülerde kullanılmaz, site içeriğindeki benzer yapılar içinde aynı metotlar kullanılabilir. 

1. Yol: float uygulanmış liste ögeleri

Bu yöntemde ul elemanına sabit bir genişlik verip, her bir li elemanına float ve sabit genişlik tanımı yaparak yan yana dizeriz. Çok kolonlu yapılarını oluşturmak için en basit metottur. 

Dezavantajı listelemek istediğimiz ögeleri yan yana dizer. Normalde istenen birinci kolonu bitirdikten sonra ikinci kolona geçmesidir.

<ul>
    <li>Birinci Oge</li>
    <li>İkinci Oge</li>
    <li>Üçüncü Öge</li>
    <li>Dördüncü Öge</li>
    <li>Beşinci Öge</li>
    <li>Altıncı Öge</li>
    <li>Yedinci Öge</li>
    <li>Sekizinci Öge</li>
    <li>Dokuzuncu Öge</li>
    <li>Onuncu Öge</li>
</ul>

CSS kodumuz

ul {
    width: 700px;
    list-style-type:none;
}
li {
    width:180px;
    margin:15px 0 0 0;
    padding:0 10px 0 0;
    line-height:15px;
    float:left;
}

Örneği görmek için tıklayınız.

700px tüm genişlik içindir her ögenin genişliğini 180px verip bide sağdan 10px padding değeri ile yan yana dizeriz. 

Örneği biraz daha geliştirip açılır menü haline getirelim. 

HTML Kodu;

<ul id="menu">
    <li><a href="">Tencere</a>
        <ul class="kapsul">
        <li><a href="">Birinci Oge</a></li>
        <li><a href="">İkinci Oge</a></li>
        ....
        <li><a href="">Onuncu Öge</a></li>
        </ul>
    </li>
    <li><a href="">Tava</a></li>
    <li><a href="">Çaydanlık</a></li>
    <li><a href="">Leğen</a>
        <ul class="kapsulSolda">
        <li><a href="">Birinci Oge</a></li>
        <li><a href="">İkinci Oge</a></li>
        .....
        <li><a href="">Onuncu Öge</a></li>
        </ul>
    </li>
</ul>

CSS kodu;(kodun uzun olduğuna bakmayın çoğu kod menü elemanlarını daha güzel görünmesini sağlamak için eklenmiştir.) Bunu menüye uygulayalım

ul{margin:0; padding:0; list-style:none}
    ul li{float:left; width:180px; border-top:3px solid #fff; position:relative}
    ul li:hover, ul li.over{border-top:3px solid #C30; background-color:#eee; width:180px;}
	    ul li a{ font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; display:block; padding:5px 5px 5px 10px; color:#0657ad; font-weight:bold}

İlk menü öğelerini oluşturduk.

ul li:hover ul, ul li.over ul{display:block;}

Burada virgülün ilk kısmı ie6 hariç olan kısmı için ie6 için ise aşağıdaki javascript kodunu yazacağız.

Tabi başımızın belası ie6 için menüyü açmak için javascript yardımı almamız gerekiyor. Çünkü ie6 linklerin haricinde :hover işleyişini uygulamıyor

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

Açılan menü kısmının tam kapsanması için kapsayamama kodu ekleyeceğiz.

ul li ul:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
ul li ul {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html ul li ul {height: 1%;}
ul li ul {display: block;}
/* IE-mac bu bolumu saklam artik */

Açılacak menü ul sinin tanımlarını yapıyoruz. 

ul li ul {width: 580px; list-style-type:none; display:none; border-bottom:3px solid #C30; background-color:#eee; padding:5px 0 10px 10px; position:absolute;}
    ul li li {width:180px; margin:5px 0 0 0; padding:0 10px 0 0; line-height:15px; float:left; border:0;}
    ul li li:hover{border:0}
        ul li li a{color:#0657ad; text-decoration:underline; padding:0; font-weight:normal}
        ul li li a:hover{color:#C30; text-decoration:none}
    ul li ul.kapsulSolda{right:0}

Kolonlama için yukarıdaki yöntemi uyguluyoruz.

Örneği görmek için tıklayınız.

2. metot: Margin yönlendirmeleri ile

Çok kolonlu yapıları oluşturmak için diğer bir yöntemde ikinci ve üçüncü kolonlara sağdan ve üstten margin değerleri vererek yapmaktır. Bu metodun avantajı kolon dizilişinin istediğimiz gibi olmasıdır. Bu metotta çoğaltacağımız kolonlara ek sınıflar eklemeliyiz. 

<ul>
    <li class="kolon1"><a href="#">Öğe 1</a></li>
    <li class="kolon1"><a href="#">Öğe 2</a></li>
    <li class="kolon1"><a href="#">Öğe 3</a></li>
    <li class="kolon1"><a href="#">Öğe 4</a></li>
    <li class="kolon1"><a href="#">Öğe 5</a></li>
    <li class="kolon2 sifirla"><a href="#">Öğe 6</a></li>
    <li class="kolon2"><a href="#">Öğe 7</a></li>
    <li class="kolon2"><a href="#">Öğe 8</a></li>
    <li class="kolon2"><a href="#">Öğe 9</a></li>
    <li class="kolon2"><a href="#">Öğe 10</a></li>
    <li class="kolon3 sifirla"><a href="#">Öğe 11</a></li>
    <li class="kolon3"><a href="#">Öğe 12</a></li>
    <li class="kolon3"><a href="#">Öğe 13</a></li>
    <li class="kolon3"><a href="#">Öğe 14</a></li>
    <li class="kolon3"><a href="#">Öğe 15</a></li>
    <li class="kolon3"><a href="#">Öğe 16</a></li>
</ul>

CSS kodumuzu yazalım

ul { margin: 0 0 1em 2em; padding: 0; }
    ul li { line-height: 1.2em; margin: 0; padding: 0; }
    * html ul li { position: relative; }
    ul li.kolon1 { margin-left: 0em; }
    ul li.kolon2 { margin-left: 10em; }
    ul li.kolon3 { margin-left: 20em; }
    li.sifirla { margin-top: -6em; }
        ul li a { display: block; width: 7em; text-decoration: none; }
        ul li a:hover { text-decoration:underline}

Örnek kodu görmek için tıklayınız.

Yukarıdaki kodda ilk li tanımımız bir önceki metot ile neredeyse aynıdır. Tek farklı olan kısım position:relative tanımıdır, bu tanım ie’deki sorunları gidermek için eklenmiştir. Her kolonun soldan mesafesi margin-left değerleri tanımlanarak sağlanmıştır. İkinci ve üçüncü kolonları yukarı çekmek içinde menü yüksekliği kadar eksi margin değeri verilerek yukarı çekilmiştir.

Margin yönlendirmeleri ile menü oluşturmak pek mantıklı değildir. Esnek olmayan bu yöntem menü ekleme ve çıkarmalarında osurn çıkarır.

3. Metot: Kapsayıcı katman ile bölmek

Bu metotta çoklu kolonlara ayrılacak listeler kapsayıcı katmanlar ile ayrılarak her bir kolon oluşturulur. Bu metotta yükseklik ile ilgi bir şey yapmaya gerek yoktur ve esnek bir yapıya sahiptir. 

<div class="licol">
    <ol>
        <li>Let me not to the marriage of true minds</li>
        <li>Admit impediments; love is not love</li>
        <li>Which alters when it alteration finds</li>
        <li>Or bends with the remover to remove</li>
    </ol>
</div>
<div class="licol">
    <ol start="5">
        <li>Oh, no, it is an ever fixed mark</li>
        <li>That looks on tempests and is never shaken;</li>
        <li>It is the star to every wand'ring bark</li>
        <li>Whose worth's unknown, although his height be taken</li>
    </ol>
</div>
<div class="licol">
    <ol start="9">
        <li>Love's not Time's fool, though rosy lips and cheeks</li>
        <li>Within his bending sickle's compass come;</li>
        <li>Love alters not with his brief hours and weeks</li>
        <li>But bears it out even to the edge of Doom</li>
    </ol>
</div>

CSS kodumuzda kısadır.

li {
    margin:15px 0 0 0;
    padding:0 10px 0 0;
    line-height:15px;
}
.licol {
    float: left;
    width: 200px;
}

Örnek kodu görmek için tıklayınız.

Diğer metotlara göre avantajlı görünen bu metodun da kendince sorunları vardır. Menü yaparken kapsayıcı bir katman(div) atayıp bu katman içinde ul’leri float ve genişlik vererek yan yana koyarız.

<ul id="menu">
    <li>
        <a href="">Tencere</a>
            <div class="ucluKolon">
              <ul>
                <li><a href="">Let me not to the marriage of true minds</a></li>
                ...
              </ul>
              <ul>
                <li><a href="">Oh, no, it is an ever fixed mark</a></li>
                ...
              </ul>
              <ul>
                <li><a href="">Love's not Time's fool, though rosy lips and cheeks</a></li>
                ...
              </ul>
            </div>
    </li>
....
</ul>

İlk menü kısmını ilk yaptığımız ile aynı kodlara sahip olacaktır.

ul{margin:0; padding:0; list-style:none}
    ul li{float:left; width:180px; border-top:3px solid #fff; position:relative}
    ul li:hover,  ul li.over{border-top:3px solid #C30; background-color:#eee; width:180px;}
        ul li a{ font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; display:block; padding:5px 5px 5px 10px; color:#0657ad; font-weight:bold}

Daha sonra kapsayıcı katman tanımlarını yapıyoruz. Tabi öncesine kapsayamama sorunu kodunu ekleyerek. Kapsayamama sorunu kodlarını başa ekliyoruz çünkü bu kısmı sayfa normal gösteriminde gizlememiz gerekiyor.

    div.ucluKolon:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    div.ucluKolon {display: inline-block;}
    /*IE-mac de bu bolumu sakla \ */
    * html div.ucluKolon {height: 1%;}
    div.ucluKolon{display: block;}
    /* IE-mac bu bolumu saklam artik */
div.ucluKolon{width:600px; display:none; border-bottom:3px solid #C30; background-color:#eee; padding:5px 0 10px 10px; position:absolute}

Üst menüde en sağdaki menü elemanının altında açılan menü sağ doğru değilde sola doğru açılacak, bunun için 

.sagda{right:0}

Üç kolonlu yapıyı oluşturmak için katman içindeki ul’lere genişlik ve float tanımı yapıyoruz.

div.ucluKolon ul{float:left; width:200px}

üst menülerin üzerine gelince açılması için 

ul li:hover div.ucluKolon, ul li.over div.ucluKolon{display:block}

ie6 için javascript kodumuzu yazıyoruz. Yukarıdaki kodun aynısı.

Örnek kodu görmek için tıklayınız.

4. CSS 3 column-count özelliği ile

CSS3 ile birlikte gelen yeni bir özellik sayesinde işler çok kolaylaştırıyor. 

<ul id="menu">
    <li>Birinci Oge</li>
    <li>İkinci Oge</li>
    <li>Üçüncü Öge</li>
    <li>Dördüncü Öge</li>
    <li>Beşinci Öge</li>
    <li>Altıncı Öge</li>
    <li>Yedinci Öge</li>
    <li>Sekizinci Öge</li>
    <li>Dokuzuncu Öge</li>
    <li>Onuncu Öge</li>
</ul>

CSS kodumuz ise iki satır

ul#menu{
    width:700px;
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

Örnek kodu görmek için tıklayınız.

Farklı tarayıcılar için yazılan bu kod maalesef ie ve opera’nın desteği olmadığı için uygulaması şimdilik yok.

5. Metot: Javascript yardımı ile

Aslında bu yöntem bir önceki metodun tamamlayıcı bir metodudur.

Bu metotta css3 column-count özelliği ile yine css ile kodu yazacağız, javascript ile de desteklemeyen tarayıcılara uyumlu hale getireceğiz.

Bu javascript kodunu csscripting.com sitende yayınlanmış, ancak bu site yayında değil cvwdesign.com sitesinde kodu buldum. Açıkça söylemek gerekirse bunun dışında çalışan javascript kodu bulamadım. 

Bu kodu kullanırken css kodunuzu harici kullanmalıyız aksi halde kod çalışmıyor. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Çoklu kolon</title>
<link href="kolon.css" rel="stylesheet" />
<!--[if IE]><script type="text/javascript" src="css3-multi-column.js"></script><![endif]-->
</head>
<body>
    <ul class="column">
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
    </ul>
</body>
</html>

Bu javascript dosyasını ekleyince css3 aşağıdaki özelliklere karşılık gelen özellikleri

  • column-count 
  • column-width 
  • column-gap
  • column-rule

destekliyor. Mevcut açık kodun boyutu fazla gelince çevrimiçi yui kompresor ile javascript dosyasını sıkıştırdım. Gayet güzel bir oran ile dosya boyutunu 37 kb’dan 19 kb’a kadar düşürdüm.

Örnek kodu görmek için tıklayınız.

jQuery yardımı ile çeşitli çözümler mevcuttur. kaynaklar bölümünde yazdım linklerini.

Kaynaklar

« Önceki Yazılar

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.