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.

4 Příspěvků v diskuzi

  1. Nedavno 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:““;
    }

  2. Zdravim, 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“.

Odpovědět