Bu yazımızda, Html ve Css ile breadcrumb (içerik haritası) nasıl yapılır onu öğreneceğiz. Breadcrumb çoğu sitede olur ama en çok ETicaret sitelerinde görüyoruz. Bir ETicaret sitesi düşünün ve iç içe birçok kategorisi olsun. Biz kullanıcı olarak Ürünler sayfasından Teknoloji kategorisine, ordan Bilgisayar kategorisine, ordan Acer marka bilgisayarlara derken iç içe birçok kategoride geziyoruz.
Bu aşamada tekrar Ürünler sayfasına gitmek için geriye doğru gidilmesi çokta kullanıcı dostu bir yöntem sayılmaz. Bunun yerine sayfa başlarına koyduğumuz içerik haritaları ile kullanıcının dilediği sayfalara daha hızlı gidebilmesini sağlarız.
Önemli : İçerik haritalarının Sitenizin Seo’suna da olumlu anlamda katkı sağladığını belirteyim.
Şimdi breadcrumb yapımına başlayalım. Örnekleri kendi bilgisayarınızda uygulamalı olarak yaparsanız sizin için daha faydalı olacaktır.
Breadcrumb Html Kodları
|
1 2 3 4 5 6 7 8 |
<ul class="breadcrumb"> <li><a href="#">Ürünler</a></li> <li><a href="#">Teknoloji</a></li> <li><a href="#">Bilgisayar</a></li> <li>Acer</li> </ul> |
Breadcrumb Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
ul.breadcrumb { padding: 10px 16px; list-style: none; background-color: #eee; } ul.breadcrumb li { display: inline; font-size: 20px; color: currentColor; } ul.breadcrumb li + li:before { padding: 8px; color: cornflowerblue; content: "/\00a0"; } ul.breadcrumb li a { color: cornflowerblue; text-decoration: none; } ul.breadcrumb li a:hover { color: #01447e; text-decoration: underline; } |
Breadcrumb Görünümü
Breadcrumb Html Kodları
|
1 2 3 4 5 6 7 8 |
<ul class="breadcrumb"> <li><a href="#">Ürünler</a></li> <li><a href="#">Teknoloji</a></li> <li><a href="#">Bilgisayar</a></li> <li><a href="#">Acer</a></li> </ul> |
Breadcrumb Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
.breadcrumb { list-style: none; overflow: hidden; font-size: 15px; font-family: sans-serif; } .breadcrumb li a { color: white; text-decoration: none; padding: 10px 0 10px 40px; position: relative; float: left; background-color: cadetblue; } .breadcrumb li a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid cadetblue; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .breadcrumb li a:before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; } .breadcrumb li:first-child a { padding-left: 10px; } .breadcrumb li a:hover { background: darkcyan; } .breadcrumb li a:hover:after { border-left-color: darkcyan !important; } |
Breadcrumb Görünümü
Umarım sizin için yararlı bir yazı olmuştur.
Html ve Css ile ilgili eksikleriniz olduğunu düşünüyorsanız, Html ve Css Dersleri ile ilgili yazmış olduğum yazı serilerini inceleyebilirsiniz.
Şu yazılarda ilginizi çekebilir.
Html ve Css ile Dikey Çizgi Nasıl Yapılır?
Html ve Css ile Pagination (Sayfalama Butonları) Yapımı
Html ve Css ile Animasyonlu Arama Kutusu Yapımı
Yeni bir yazımda görüşmek üzere.
 Yapımı){kind=link}