Vertikální 3D menu

1. října 2005

•

Vertikální menu s 3D efektem.

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

Toto řešení publikoval Ingo Turski. Bližší popis najdete v článku CSS-formatierte Liste als 3D-Menü.

CSS

#navigace
{
color: white;
background: #17a;
border-bottom: 0.2em solid #17a;
border-right: 0.2em solid #17a;
padding: 0 1px;
margin-left: 0;
width: 12em;
font: normal 0.8em Verdana, sans-serif;
}
#navigace li
{
list-style: none;
margin: 0;
font-size: 1em;
}
#navigace a
{
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
}
#navigace a#aktivniodkaz { border-color: #5bd #035 #068 #f30; }
#navigace a
{
width: 99%; /* Důležité pro IE */
}
#navigace a:hover, #navigace a#aktivniodkaz:hover
{
background: #28b;
border-color: #069 #6cf #5bd #fc0;
padding: 0.4em 0.35em 0.25em 0.9em;
}
#navigace a:active, #navigace a#aktivniodkaz:active
{
background: #17a;
border-color: #069 #6cf #5bd white;
padding: 0.4em 0.35em 0.25em 0.9em;
}

XHTML

<html>
<body>
<ul id=“navigace“>
<li id=“active“><a href=“#“ id=“aktivniodkaz“>Aktivní odkaz</a></li>
<li><a href=“#“>První odkaz</a></li>
<li><a href=“#“>Druhý odkaz</a></li>
<li><a href=“#“>Tretí odkaz</a></li>
<li><a href=“#“>Ctvrtý odkaz</a></li>
</ul>
</body>
</html>