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;

<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/ (kullanım avantajları ve örnekler)
• http://quince.infragistics.com/Patterns/Breadcrumbs.aspx (mantalitesi)
• http://www.patternry.com/p=breadcrumbs/ (mantalitesi)
• http://www.useit.com/alertbox/breadcrumbs.html (mantalite)
• http://veerle-v2.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs
• http://css-tricks.com/triangle-breadcrumbs/
• http://css-tricks.com/markup-for-breadcrumbs/
• http://www.jankoatwarpspeed.com/post/2008/08/14/Create-applecom-like-breadcrumb-using-simple-CSS.aspx
• http://alpha.patterntap.com/collections/Breadcrumbs (örnekler)
• http://patterntap.com/tap/collection/breadcrumbs (örnekler)

/* clearfix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

ul{ margin:0 auto; padding:10px; background-color:#008bc6; width:450px;}
    ul li{ list-style:none; float:left; border-right:1px solid #046e9b; border-left:1px solid #05a3e6;}
        ul li a{ display:block; text-decoration:none; color:#fff; font:bold 12px Arial, Helvetica, sans-serif; margin-right:10px; padding:0 10px}

HTML

<ul class="clearfix">
   <li><a href="">Bak postacı</a></li>
    <li><a href="">geliyor</a></li>
    <li><a href="">selam veriyor</a></li>
    <li><a href="">her kes ona bakıyor</a></li>
</ul>

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

İlk öğenin solundaki kenar çizgisi ile son öğenin sağ kenar çizgisini kaldırmak için bu öğelere sınıf atamalıyız ve bu kenar çizgilerini sıfırlamalıyız.

    ul li.ilkOge{ border-left:0;}
    ul li.sonOge{ border-right:0;}

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

Bu uygulamayı dikey menü olarakta yapabiliriz.

ul{ margin:0 auto; padding:10px; background-color:#008bc6; width:200px;}
ul li{ list-style:none; border-top:1px solid #046e9b; border-bottom:1px solid #05a3e6;}
ul li.ilkOge{ border-top:0;}
ul li.sonOge{ border-bottom:0;}
   ul li a{ display:block; text-decoration:none; color:#fff; font:bold 12px Arial, Helvetica, sans-serif; margin-right:10px; padding:10px 0}

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

Bu yazıyı yazmaya karar verdiğimde “css ile buton yapmak” adlı yazının hazırlıkları da devam ediyordu, oradada butonları araştırırken Firefox’un sitesinde uyguladığı bir metot bu konuyu ilgilendiren bir metot olduğunu gördüm. Onuda buraya yazayım. Ancak bu metot İnternet Explorer’da çalışmayacaktır.

HTML kodu

<a href="">+ <span>Çizgili buton</span></a>

CSS kodu

a{
    background-color:#ed145b;
    padding:5px 10px;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    font-size:16px;
}
a span{
    border-left:2px groove rgba(144, 71, 95, 0.55);
    display:inline-block;
    padding-left:6px
}

Koda biraz açıklama getirelim. border’a verilen groove özelliği bizim istediğimiz etkiyi yapan bir özelliktir. Bu özellik ile eklenen çizgiler gri renklidir. Biz bu çizgiye biraz saydamlık kazandırıp zemin rengine uyum sağlamasına yarar.

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

<ul>
  <li>deneme</li>
  <li>olarak</li>
  <li>bir örnek </li>
</ul>

Yatay bir menü olacağı için

  ul li{display:inline;}

eklemesini yaptım, daha sonra da padding değerleri ekleyince fark ortaya çıktı.

  ul li{ padding:0 12px; background-color:#999}

İşin aslı İnternet Explorer 6 ve 7’de istediğim gibi olurken yeni nesil tarayıcılarda arada fazladan boşluklar atanmış gördüm. margin:0 değeri atadım ama olmadı biraz araştırınca gördüm ki display:inline elemanlar(display:inline-block’ta da oluyor) arasında kod kısmında boşluk varsa bu boşluklar yorumlanan sayfada da görünüyor.

Aradaki boşlukları kaldırmak için bir kaç yöntem var. Yatay menü oluşturmak için diğer bir yöntem olan float yöntemini denemek bunlardan biri

  ul li{ float:left}

Diğer bir çözüm yolu ise aradaki boşlukları kaldırmak.

<ul>
 <li>deneme</li><li>olarak</li><li>bir örnek </li>
</ul>

İnternet Explorer’ın sorunlarına alışmış bu bünye Microsoft’un bu yeni nesil eskimiş tarayıcısından böyle bir sorun olmasını yadırgamadı açıkçası. Soruna ie7 gibi yorumlama kodunu ekleyerek çözmek istedim ama kod sitenin dinamik kısımlarında çalışırken statik kısımlarında çalışmadı.

Bu iş ile bir projede karşılaştım, proje ismini açıklamak sakıncalı olabilir diye ben size benzer bir örnek kodunu vereceğim. 

<!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>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
	$('a').hover(function(){
		$(this).children(':last').show();
	},
	function(){
		$(this).children(':last').hide();
	});
 });
</script>
<style type="text/css">
a{ position:relative;}
	a div{display:none; padding:20px; background-color:#999; width:250px; position:absolute; top:18px; left:0}
		a div input{ background:transparent}
</style>
</head>

<body>
<a href="javascript:;">menu aç
<div><input type="text" /></div>
</a>
<p><img src="http://www.fatihhayrioglu.com/wp-content/ie7_kaydirma_cubugu.jpg" width="450" height="398" /></p>
</body>
</html>

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

Bende sorunu araştırmaya başladım ve sonunda buldum. Sorun input‘a atanan background:none veya background:transparent tanımlamalarından kaynaklanıyor. backgorund’a renk veya resim tanımı yapınca sorun çözülüyor.  

Ben tasarıma uymak için background’a resim tanımlayarak sorunu aştım.

Kaynak

• http://ff.im/gwMR3

#icerikAlani {
    margin: 10px;
    border: 1px solid gray;
}
#icerikAlani #menu {
    float: right;
    width: 150px;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    margin-left: 5px;
}

İçerik alanına(#icerikAlani) margin ve kenarlık tanımlası yaptık. Daha sonra menu alanını(#menu) içerik alanının sağ üst kısmına yerleştirmek için float:right, genişliğini belirlemek için width:150px, sol ve alt kenarlıklarını belirlemek için border-left ve border-bottom(sağ ve üst ksımlarda zaten olduğu için buralara kenarlık ataması yapmadık) ve içerik metini ile arasında boşluk bırakmak için margin-left atamlarını yapıyoruz.

<div id="icerikAlani">
    <div id="menu">
    <ul>
        <li><a href="anasayfa.html">Ana Sayfa </a></li>
        <li><a href="haberler.html">Haberler</a></li>
        <li><a href="iletisim.html">İletişim</a></li>
    </ul>
    </div>
    <h1>Lorem Ipsum Dolar </h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>  . . .
</div>

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

1.Adım Başlangıç olarak her zamanki gibi XHTML kodumuzu yazalım:

<ul>
	<li><a href="#">Ana Sayfa</a></li>
	<li><a href="#">Haberler</a></li>
	<li><a href="#">Ürünler</a></li>
</ul>

2. Adım Daha önceki menü örneklerinden de alışkın olduğumuz margin,padding ve liste imgelerini kaldırma işlemini yapalım:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 600px;
    float: left;
    border-bottom: 1px solid gray;
}

3. Adım Yukarıda bahsettiğimiz metodu uygulamak için iki adet resim hazırlamalıyız.

Bu resimlerin yüksekliklerinin uzun olmasının nedeni font boyutunun arttırılması(yakınlaştırma) durumunda iki satır olabilecek menülerde menü görünümünün bozulmaması içindir.

4. Adım Menüyü yatayda sıralamak için float:left tanımlaması yapıyoruz ve sağ zemin resmini(sekme_sag_resim.gif) uyguluyoruz:

ul li {
    float: left;
    background: url(images/sekme_sag_resim.gif) no-repeat top right;
}

5. Adım Daha önceki örneklerde gördüğümüz gibi tüm sekmeye link vermek için display:block tanımlaması yapıyoruz, sekmenin sol kısmını tamamlamak için zemin resmi olarak(sekme_sol_resim.gif) ekliyoruz, tüm sekmelerde aynı yüksekliği yakalamak için line-height tanımlamasını yapıyoruz, text-decoration: none ile link alt çizgilerini kaldırıyoruz ve IE Mac ortamında sorun çıkarmaması için float:left ekliyoruz:

<ol>
li a {
    background:url(images/sekme_sol_resim.gif) no-repeat left top;
    display: block;
    padding: 0 2em;
    line-height: 2.5em;
    text-decoration: none;
    float: left;
    color:#000;
}

6. Adım Güzel bir görünüm katmak için basit bir rollover efekti verelim:

ul a:hover {
	color: #9D9C9C;
}

Örnek kodları indirmek için tıklayınız.

Sonuç: Kodumuzu çalıştırdığımızda aşağıdaki sonucu elde edeceğiz. Tab menüye bir çok örnek var resimli, resimsiz, resimli rollover gibi; internette aratarak bir çok örnek bulabilirsiniz.