Horizontalní menu se zvětšením

26. ledna 2006

•

Toto řešení ukazuje, jak vytvořit horizontální menu s efektem zvětšení při najetí kurzoru myši. Jsou zde dva příklady jeden s použitím poloprůhledného obrázku jako stínu a druhý bez jakéhokoli obrázku.

Zde si můžete prohlédnout výsledek bez obrázku jako stínu.

Zde si můžete prohlédnout výsledek s obrázkem jako stínem.

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku An enlarging unordered list.

CSS

#menu
{
padding:0;
margin:0;
list-style-type:none;
}
#menu li
{
width:75px;
height:20px;
float:left;
margin-right:2px;
}
#menu a em
{
font-style:normal;
font-size:0.9em;
line-height:1.5em;
}
#menu a
{
text-decoration:none;
color:#000;
position:absolute;
width:75px;
height:20px;
display:block;
text-align:center;
}
#menu a.cervena
{
background:#c00; color:#fff;
}
#menu a.oranzova
{
background:#fc0; color:#000;
}
#menu a.zluta
{
background:#ee0; color:#000;
}
#menu a.zelena
{
background:#080; color:#fff;
}
#menu a.modra
{
background:#00c; color:#fff;
}
#menu a:hover
{
width:120px;
height:28px;
z-index:200;
background:transparent url(„stin.gif“);
/* background:#aaa; – v případě použití bez obrázku */
}
#menu a:hover em
{
font-size:1.5em;
line-height:1.1em;
overflow:hidden;
cursor:pointer;
background:#fff;
border:1px solid #000;
position:absolute;
width:120px;
height:25px;
left:-12px;
top:-4px;
}
#menu a:hover.cervena em
{
background:#c00;
}
#menu a:hover.oranzova em
{
background:#fc0;
}
#menu a:hover.zluta em
{
background:#ee0;
}
#menu a:hover.zelena em
{
background:#080;
}
#menu a:hover.modra em
{
background:#00c;
}

XHTML

<html>
<body>
<ul id=“menu“>
<li><a class=“cervena“ href=“#“>Jahody</a></li>
<li><a class=“oranzova“ href=“#“>Grapefruity</a></li>
<li><a class=“zluta“ href=“#“>Banány</a></li>
<li><a class=“modra“ href=“#“>Švestky</a></li>
</ul>
</body>
</html>