Jak by měl vypadat ideální HTML kód pro navigační cestu?
Navigační cesta (breadcrumbs), kterou můžete vidět jak na interval.cz, tak i na ostatních webech, typicky ve všelijakých internetových obchodech, je velmi důležitou komponentou, která mj. zvyšuje komfort používání webové stránky. Poskytuje totiž návštěvníkovi stránek rychlou orientaci o tom, kde ve struktuře webu se právě nachází a poskytuje mu možnost přejít do nadřazených úrovní (například z detailu výrobku do kategorie, ve které se daný výrobek nachází). Jaké značkování je ale pro tento typ navigace nejlepší? Použít neuspořádaný seznam? Nebo uspořádaný seznam? Nebo jednoduše napráskat do stránky několik odkazů, které se vnoří do odstavce? Nebo nakonec nějak úplně jinak? Několik možností vám napoví článek Exploring Markup for Breadcrumbs.
Zdroj: css-tricks.com.
peter
Lis 18, 2010 v 15:58Nedavno jsem videl pouzivat vystiznejsi nazev, path bar, bread-cumbs je hodne zavadejici. Tak jsem to zkusil takhle:
Nacházíte se zde:
Filozoficko-přírodovědecká fakulta v Opavě
Ústavy
Ústav cizích jazyků
A dabelska finta pto IE8 a FF3
.nav_pathbar
{
font-size:11px;
color:#333;
margin:28px 28px 0px 28px;
padding:6px 0px 3px 0px;
padding-left:3px; /*posunuti kvuli nadpisu*/
}
.nav_pathbar p
{
margin:0;padding:0;
display:inline;
display:none;
}
.nav_pathbar ul, .nav_pathbar li
{
display:inline; list-style:none; margin:0; padding:0;
}
.nav_pathbar a
{
text-decoration:none;
color:#333;
}
.nav_pathbar a:hover
{
text-decoration:underline;
}
.nav_pathbar li:before
{
content:“ → „; /*⇨⇾→┄▸▹▻⟶⠕*/
}
.nav_pathbar li:first-child:before
{
content:““;
}
Miroslav Kučera
Lis 19, 2010 v 8:38Zdravim, vetsina pro tento styl navigace pouziva termin „breadcumbs“, coz jsou doslova „drobecka chleba“ – odkazuje se to na sypani drobecku na zem, aby bylo mozne najit cestu zpet (pokud je teda mezim nevyzobaji ptaci ;). V cestine se pro tuhle navigaci pouziva take termin „drobeckova navigace“.
www.vizion.sk
Pro 6, 2010 v 12:43Vdaka za tip, skusim niekedy pouzit.
www.fgatelier.sk
Čvn 27, 2012 v 15:44Užitočné info