Drobečková navigace v CSS

22. 04. 2007 | Redakce Interval.cz | Pro CSS | Komentáře: 0

Drobečková navigace je výborná pomůcka pro to, aby návštěvník stránky získal a udržel si představu o tom, kde se právě nachazí, a mohl se dostat jednoduše a bez přemýšlení na další důležité úrovně webu.

Pro starší verze Microsoft Internet Exploreru je využito obrázku místo pseudoelementu :before, který MSIE neměl implementován.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Fat Erik. Bližší popis najdete v článku Fat Erik's breadcrumbs.

Další informace o drobečkové navigaci můžete najít například v článku Drobečková navigace na webu.

CSS

#navcontainer
{
margin-left: 30px;
}
#navlist
{
list-style: none;
padding: 0;
margin: 0;
}
#navlist li
{
display: inline;
padding: 0;
margin: 0;
}
#navlist li:before
{
content: "> ";
}
#navlist li:first-child:before
{
content: "";
}
/* css pro IE */
* html #navlist li
{
background-image: url("gt.gif");
background-repeat: no-repeat;
background-position: 0 50%;
padding: 0 0.5em 0 1em;
margin: 0 1em 0 -1em;
}
* html #navlist
{
height: 1%;
}
* html #navlist li
{
display: block;
float: left;
}
* html #navlist li:first-child
{
background-image: none;
}

XHTML

<html>
<body >
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Hlavní stránka</a></li>
<li><a href="#">Hlavní sekce</a></li>
<li><a href="#">Podsekce</a></li>
<li><a href="#">Detail</a></li>
</ul>
</div>
</body>
</html>