breadcrumb kelimesinin türkçesi nedir açıkçası bilmiyorum ama genelde navigasyon diye geçiyor. Bir yanlışımız varsa affola. Bu yazımıza css kullanarak güzel ve göze hoş gelen navigasyon yapıyoruz. Eğer herşey yolu yordamında yaparsak aşağıdaki gibi bir menü ile karşılacaksınız. Tekrar belirteyim yapmış olduğum tüm çalışmalarımı tüm tarayıcılardan geçirererek sizlere sunuyorum ki olası bir tarayıcı uyumu sorunu oluşmasın.

Yapacağımız çalışma

Css kodlarımız

body { margin:30px; }
ul {
	background:url(bc_bg.png) repeat-x;
	font:normal 11px/25px arial;
	list-style:none;
	overflow:hidden;
	border:solid 1px #cacaca;
	height:26px;
}
ul li { float:left; padding-left:10px; }
ul li a {
	padding-right:15px;
	text-decoration:none;
	color:#000;
	display:block;
	background:url(bc_separator.png) right no-repeat;
}
ul li a:hover { color:#46a1d1; }

Kodlarımızı yazdıktan sonra siz ek olarak iyileştirmeler ve farklı varyasyonlar deneyebilirsiniz. Şimdi de html kısmını yazarak çalışmamızı bitirelim

HTML Kısmı

<ul id="breadcrumb_menu">
	<li><a href="#" title="Ana Sayfa">Ana Sayfa</a></li>
	<li><a href="#" title="Hakkımda">Hakkımda</a></li>
	<li><a href="#" title="Fotoğraf Galerisi">Fotoğraf Galerisi</a></li>
	<li><a href="#" title="Bana Ulaşın">Bana Ulaşın</a></li>
</ul>

• Çalışmayı incelemek için tıklayınız