Horizontalní stínované menu
Tento příklad ukazuje jednoduché horizontální menu s efektem stínu v textu odkazů. Menu je tvořeno pouze textem bez využití obrázků. Znak oddělující odkazy v řádku může být jednoduše nahrazen jiným.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku Example Menu Nine.
CSS
#menu
{
position:relative;
font-family:arial, sans-serif;
color:#f39e4a;
background:#fff;
height:2em;
padding:1em;
font-weight:bold;
}
#menu a, #menu a:visited
{
text-decoration:none;
color:#000;
}
#menu a span
{
display:none;
}
#menu a:hover
{
position:relative;
top:2px;
left:2px;
text-decoration:none;
color:#dfdfdf;
}
#menu a:hover span
{
display:block;
position:absolute;
top:-3px;
left:-2px;
color:#000;
cursor:pointer;
}
XHTML
<html>
<body>
<div id=“menu“>
<a href=“#“>Odkaz 1<span>Odkaz 1</span></a> <>
<a href=“#“>Odkaz 2<span>Odkaz 2</span></a> <>
<a href=“#“>Odkaz 3<span>Odkaz 3</span></a> <>
<a href=“#“>Odkaz 4<span>Odkaz 4</span></a> <>
<a href=“#“>Odkaz 5<span>Odkaz 5</span>
</a>
</div>
</body>
</html>
