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>
Mohlo by vás také zajímat
-
Jak si vyzkoušet Apple Intelligence v EU
2. srpna 2024 -
Nové AI modely od Open AI a Google
22. května 2024 -
Rychlost serveru: Klíč k lepšímu umístění ve vyhledávačích
7. června 2024 -
Zvýšení výkonu WiFi signálu: Jak a proč používat WiFi zesilovače
28. června 2023
Nejnovější
-
Apple jde naproti práci s HDR monitory!
17. ledna 2025 -
Jak využít AI potenciál svého Macu?
9. ledna 2025 -
NIS2: Verifikace údajů vlastníků domén
6. ledna 2025 -
Dostali jste k vánocům PC? Využijte jeho AI potenciál!
3. ledna 2025