Just nu i M3-nätverket
Jump to content

Snabblänkar 'Brödsmulor '


Jompan

Recommended Posts

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

Både CSS och HTML.

 

// Jompan

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...