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>
Další aktuální články na interval.cz
- Rychost, rychlost, rychlost - zrychlete své stránky
- Chamurappiho Webylon: čtyři články s kritikou W3C
- Nenápadný cloud: synchronizace dat z prohlížečů
- Pozvánka: Random Hacks of Kindness 2012
- Zajímavost o češtině pro redakční systém WordPress
Tematicky související články
- Simulace animace v CSS
- Vertikální dvouúrovňové obrázkové menu
- CSS úprava pro tisk
- Diagramy v CSS bez použití obrázků
- Zakulacené rámečky
Dejte vědět i ostatním o článku
Diskuse (počet komentářů: 0)
Buďte prvním návštěvníkem, který přidá nový komentář.
