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
-
Souboj na trhu s CPU pro servery: AMD vs. Intel
8. prosince 2023 -
-
Zvýšení výkonu WiFi signálu: Jak a proč používat WiFi zesilovače
28. června 2023 -
Aktualizujete svoji .NET webovou aplikaci? Může se hodit app_offline.htm
10. července 2024
Nejnovější
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024