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
-
Co je to DNSSEC, jak funguje a jak si ho nastavit?
14. srpna 2024 -
Zabezpečení e-mailů: Jak můžete chránit vaši firemní komunikaci
13. prosince 2023 -
Thunderbolt 4 vs. OCuLink: Přišel čas na upgrade?
27. května 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