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
-
-
Nepodceňte UX na vašem webu: Proč na něm záleží?
10. dubna 2024 -
Jak zvýšit CTR vašeho e-mail marketingu
9. září 2024 -
Vstupte do éry umělé inteligence: ASOME Max Studio s AMD Ryzen™ 9 7940HS
14. listopadu 2023
Nejnovější
-
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024