CSS Dersleri

CSS ile Hiyerarşik Yerimi(Breadcrumbs) Yapmak

Fatih Hayrioğlu

17 Mar 2011 — 3 min read

Kodladığım bir çok sitede eğer site alt sayfalar ve onlarında alt sayflarında oluşan karmaşık bir yapıya sahip ise genelde kullanıcıya nerede olduğu göstermek için hiyerarşik linkler kullanırız. Bunu hiyerarşik yerimi olarak isimlendirmek bana daha mantıklı geldi. Amaç web sitemizin kullanılabilirliğini arttırmaktır. Kullanıcıya bulunduğu sayfa hiyerarşik yapısıda gösterilerek daha kullanışlı bir erişim ve kullanım sağlanır. Ayrıca arama motorlarını taramaları içinde sitemize artı değer katar. Kullanıcıya her seviyeye kolayca geçiş imkanı sağlar.

En çok örnek verilen site: apple.com

Basit yapılı bir yerimi: bonus.com.tr

Basit yapılı bir örnek daha: http://turkcetwitter.livego.com/

Farklı renkte bir uygulama: http://www.ligonier.org/rym/

Farklı Tasarımda bir uygulama: http://www.ideo.com

Yukarıda bir kaç örneğini verdiğim görüntülerde görüldüğü gibi bir çok şekilde uygulamaya geçirilebilir.

Sadede gelelim ve biz kendi hiyerarşik yerimimizi yapalım.

HTML kodu;

{% highlight html %}

{% endhighlight %}

Gelelim CSS kodumuza, liste başlangıç değerlerini sıfırlayalım. Listelerin başındaki sabit yuvarlak ikonları kaldırıp, etrafındaki boşlukları kaldıralım.

{% highlight css %} ul#yerimi, ul#yerimi li{ list-style:none; margin:0; padding:0; } {% endhighlight %}

Listeyi yatay yapmak için float:left tanımı yapıyoruz. İnternet Explorer 6 için bağlantıya da float:left atamamız gerekecek.

{% highlight css %} ul#yerimi li { float:left; font:12px Arial, Helvetica, sans-serif; line-height:30px; padding-left:15px; font-weight:bold } {% endhighlight %}

Bağlantılara şeklini verelim ve görselliğini düzenleyelim.

{% highlight css %} ul#yerimi li a { display:block; float:left; color:#0086C0; text-decoration:none; height:30px; font-weight:normal }

ul#yerimi li a:hover { text-decoration:underline } {% endhighlight %}

Her kademe arasına ayraç koyalım. Burada şöyle bir ipucu var ki, oda bulunduğumuz sayfaya link koymuyoruz ve bu sayede araya koyacağımız ayraçları sadece linklere vererek kolayca çözüm sağlıyoruz.

{% highlight css %} ul#yerimi li a { display:block; float:left; color:#0086C0; text-decoration:none; background:url(bc_separator.png) top right no-repeat; height:30px; padding-right:15px; font-weight:normal } {% endhighlight %}

Son olarakta tüm alana bir ardalan resmi koyup birde kenar çizgisi ekleyelim.

{% highlight css %} ul#yerimi { border:1px solid #cacaca; background:url(bc_bg.png) 0 0 repeat-x } {% endhighlight %}

Bu eklemeyide yapınca Float Uygulanmış Elementleri Tam Kapsayamama (clearfix) sorunu ile karşılaşırız. Çözüm linkteki gibidir. sonuç olarak CSS kodumuz;

{% highlight css %} .kapsul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.kapsul { display: inline-block; } /*IE-mac de bu bolumu sakla

/ * html .kapsul { height: 1%; } .kapsul { display: block; } / IE-mac bu bolumu saklam artik */

ul#yerimi { border:1px solid #cacaca; background:url(bc_bg.png) 0 0 repeat-x }

ul#yerimi, ul#yerimi li { list-style:none; margin:0; padding:0; }

ul#yerimi li { float:left; font:12px Arial, Helvetica, sans-serif; line-height:30px; padding-left:15px; font-weight:bold }

ul#yerimi li a{ display:block; float:left; color:#0086C0; text-decoration:none; background:url(bc_separator.png) top right no-repeat; height:30px; padding-right:15px; font-weight:normal }

ul#yerimi li a:hover { text-decoration:underline } {% endhighlight %}

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