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.
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;
<ul id="yerimi" class="kapsul">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Birinci alt Menü</a></li>
<li><a href="#">İkinci alt Menü</a></li>
<li><a href="#">Üçüncü alt menü</a></li>
<li>Bulunduğumuz sayfa</li>
</ul>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.
ul#yerimi,
ul#yerimi li{
list-style:none;
margin:0;
padding:0;
}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.
ul#yerimi li {
float:left;
font:12px Arial, Helvetica, sans-serif;
line-height:30px;
padding-left:15px;
font-weight:bold
}Bağlantılara şeklini verelim ve görselliğini düzenleyelim.
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
}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.
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
}Son olarakta tüm alana bir ardalan resmi koyup birde kenar çizgisi ekleyelim.
ul#yerimi {
border:1px solid #cacaca;
background:url(bc_bg.png) 0 0 repeat-x
}Bu eklemeyide yapınca Float Uygulanmış Elementleri Tam Kapsayamama (clearfix) sorunu ile karşılaşırız. Çözüm linkteki gibidir. sonuç olarak CSS kodumuz;
.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
}Örneği görmek için tıklayınız.
Kaynaklar
- http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
- quince.infragistics.com/Patterns/Breadcrumbs.aspx
- http://www.patternry.com/p=breadcrumbs
- http://www.useit.com/alertbox/breadcrumbs.html (mantalite)
- veerle-v2.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs
- http://css-tricks.com/triangle-breadcrumbs/
- http://css-tricks.com/markup-for-breadcrumbs/
- jankoatwarpspeed.com/post/2008/08/14/Create-applecom-like-breadcrumb-using-simple-CSS.aspx
- patterntap.com/tap/collection/breadcrumbs