Mapa webu

9. března 2006

•

Toto řešení ukazuje, jak se dá formátovat libovolný stromový výpis.

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

Toto řešení pochází z webu ZAB DESIGN. Bližší popis najdete v článku Sitemap Celebration.

CSS

body
{
font-size: 83%;
line-height: 173%;
font-family: Geneva, Arial, Helvetica, Sans-Serif;
}
h1
{
font-size: 140%;
}
p
{
line-height: 165%;
}
p span
{
font-size: 10px; color: #333;
}
.nav
{
padding: 0; margin: 50px 0 0 70px;
font-family: Arial, Helvetica, Sans-Serif;
overflow: visible;
}
.nav ul
{
display: block;
list-style: none;
margin: -11px 0;
padding: 0;
border: 0;
}
html + body .nav ul
{
position: relative;
top: -10px;
}
.nav ul li
{
position: relative;
top: 0px;
left: -11px;
margin: 10px 0 5px 0;
padding: 0;
border: 0;
voice-family: „\“}
\““;
margin: 10px 0 5px 10px;
}
html + body .nav ul li
{
display: inline;
width: 100%;
position: relative;
top: 0px;
left: -12px;
margin: 10px 0 5px 0;
}
.nav a,
.nav a:visited
{
width: 18.4em; height: 1.5em;
display: block;
margin: 0 0 0 3px;
padding: 1px;
font-weight: bold;
font-size: 110%;
line-height: 1.5em;
text-indent: 0.5em;
text-align: left;
text-decoration: none;
voice-family: „\“}
\““;
margin: 0 0 0 -10px;
}
html + body .nav a,
html + body .nav a:visited
{
text-indent: 0;
padding: 0 0 0 8px;
}
.nav ul ul
{
padding: 12px 0 18px 0;
background: none;
}
html + body .nav ul ul
{
position: relative;
top: 0px;
}
.nav ul li li
{
position: relative;
top: 0px;
left: 10px;
margin: 10px 0 5px 1px;
padding: 0 0 0 25px;
voice-family: „\“}
\““;
left: 0px;
/* margin: 10px 0 5px 1px; padding: 0 0 0 25px; */
}
html + body .nav ul li li
{
position: relative;
left: 12px;
margin: 10px 0 5px 0;
}
.nav ul li .sub-sub
{
/* position: relative; top: 0px; */ left: 10px;
margin: 10px 0 0 1px; /* padding: 0 0 0 25px; */
voice-family: „\“}
\““;
position: relative;
top: 0px; left: 0px;
}
.nav ul ul a,
.nav ul ul a:visited
{
width: 15.9em;
height: 1.3em;
margin: 0; /* padding: 1px; */
font-size: 110%;
line-height: 1.3em;
font-weight: normal;
text-indent: 0.4em;
}
.nav ul ul ul
{
margin: 0 0 30px 12px;
padding: 12px 0 0 0;
}
.nav ul li li li
{
position: relative;
top: 10px;
left: 0px;
margin: 10px 0 5px 0;
padding: 0 0 0 20px;
}
html>body .nav ul li li li
{
top: 10px;
}
html + body .nav ul li li li
{
top: 14px;
}
.nav ul ul ul a,
.nav ul ul ul a:visited
{
width: 14.9em;
padding: 1px;
font-size: 100%;
}
html + body .nav ul ul a,
html + body .nav ul ul a:visited
{
text-indent: 0;
padding: 0 0 0 8px;
}
.nav
{
border: 0;
border-left: 1px solid #2A71E4;
}
.nav ul li li{
color: #000;
background: url(„82-1.gif“) left center no-repeat;
}
.nav ul ul ul
{
border-left: 1px solid #2A71E4;
}
.nav ul li .sub-sub
{
background: url(„82-1.gif“) top left no-repeat;
}
.nav a,
.nav a:visited
{
color: #4F4F4F;
border: 1px solid #2A71E4;
background: #FFF;
}
.nav a:active,
.nav a:hover,
.nav a:focus,
a:focus .sffocus
{
color: #000;
border: 1px solid #000;
background: #FAFAFA;
}
.nav ul ul a, .nav ul ul a:visited
{
color: #4F4F4F;
border: 1px solid #9292A1;
background: #FFF;
}
.nav ul ul a:active,
.nav ul ul a:hover,
.nav ul ul a:focus
{
color: #000;
border: 1px solid #000;
background: #FAFAFA;
}

XHTML

<html>
<body>

<div class=“nav“>

<ul>

<li><a href=“#“>Hlavní stránka</a></li>

<li><a href=“#“>Elektronika</a>

<!– Druha uroven –>

<ul>

<li><a href=“#“>Hi-Fi</a></li>

<li><a href=“#“>Bílá technika</a></li>

<li class=“sub-sub“><a href=“#“>Počítače</a>

<!– Treti uroven –>

<ul>

<li><a href=“#“>Sestavy</a></li>

<li><a href=“#“>Komponenty</a></li>

<li><a href=“#“>Příslušenství</a></li>

</ul>

</li>

</ul>

</li>

<li><a href=“#“>Sport</a>

<ul>

<li><a href=“#“>Batohy</a></li>

<li><a href=“#“>Boty</a></li>

<li><a href=“#“>Zimní výbava</a></li>

</ul>

</li>

<li><a href=“#“>Kontakt</a></li>

<li><a href=“#“>Odkazy</a></li>

</ul>

</div>
</body>
</html>