Horizontalní menu se zvětšením
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=“#“><em>Jahody</em></a></li>
<li><a class=“oranzova“ href=“#“><em>Grapefruity</em></a></li>
<li><a class=“zluta“ href=“#“><em>Banány</em></a></li>
<li><a class=“modra“ href=“#“><em>Švestky</em></a></li>
</ul>
</body>
</html>
Mohlo by vás také zajímat
-
-
Co je to TTL a proč na něm záleží?
25. března 2025 -
Jak lze snadno upravovat soubory v PDF?
14. září 2023 -
Jak si vyzkoušet Apple Intelligence v EU
2. srpna 2024
Nejnovější
-
Nenechte se zaskočit TLS certifikáty na 47 dní
2. května 2025 -
Zrychlete svůj web s LiteSpeed a CZECHIA.COM
29. dubna 2025 -
-