Drobečková navigace v CSS
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>
Mohlo by vás také zajímat
-
Jak vybrat doménu: Co je dobré vědět?
2. září 2024 -
Nové AI modely od Open AI a Google
22. května 2024 -
-
Nejnovější
-
Počítač v kapse: Android 16 připravuje průlomový Desktop Mode
8. července 2025 -
Novinky ze světa domén: Co nás čeká v blízké budoucnosti?
3. července 2025 -
E-mail je tu s námi už 50 let, půjde do penze?
30. června 2025 -
Budoucnost HTTPS a SSL certifikátů
25. června 2025