Snabblänkar 'Brödsmulor '

[Jompan]

Är det någon som vet hur man kodar s.k Brödsmulor / breadcrumb enklast?

Både CSS och HTML.

 

// Jompan

[Jonas__B]

i html gör en lista med länkar

<ul id="breadcrumbs">
<li><a href="/">Hem</a></li>
<li><a href="/Products">Produkter</a></li>
<li><a href="/Products/the-product-828">Elvisp</a></li>
</ul>

 

I css, ta bort punkterna och sätt inline på li.

 

Sedan hur man stylar det är enligt tycke och smak men så här kan man göra

#breadcrumbs {list-style:none outside; padding:0;margin:0}
#breadcrumbs li{display:inline;padding:0;margin:0;color:#aaa;}
#breadcrumbs a, #breadcrumbs span{color:#aaa;text-decoration:underline; padding-right: 5px;}
#breadcrumbs a:hover,
#breadcrumbs span{text-decoration:none}

 

Om man inte vill länka sidan man är på sätter man sidnamnet inom span så stylas upp den som en länk.

<li>> <span>Undersida utan länk</span></li>

Här ser du även att jag lagt in en pil i html som man kan lägga in mellan sidorna.