Vertikální obrázkové menu

1. října 2005

•

Toto menu nevykazuje nepříjemný efekt blikání při najetí v MSIE, přestože není použit žádný preload obrázků.

Pro správnou funkci si vytvořte obrázek podobný tomuto. Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Petr Staníček. Bližší popis najdete v článku Rychlé rollovery bez načítání. Další příklady najdete v článku Free Menu Designs V 1.1.

CSS

body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}
#menu a
{
display:block;
width:200px;
height:30px;
color: #777;
background: url(„menu5.gif“) 0 0 no-repeat;
text-decoration: none;
}
#menu a:hover
{
background: url(images/menu5.gif) 0 -32px;
color: #ffffff;
}
#menu a:active
{
background: url(images/menu5.gif) 0 -64px;
color: #ffffff;
}
div.outer
{
background: url(„menu5.gif“) 0 -32px no-repeat;
}
div.outer a
{
display: block;
margin: 0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
background: url(„menu5.gif“) top left no-repeat;
}
div.outer span
{
display: block;
margin:0;
padding: 8px 25px 0 10px;
}

XHTML

<html>
<body>
<div id=“menu“>
<div class=“outer“>
<a href=“#1″ title=“Odkaz 1″><span>Stylový Odkaz 1</span></a>
</div>
<div class=“outer“>
<a href=“#2″ title=“Odkaz 2″><span>Stylový Odkaz 2</span></a>
</div>
<div class=“outer“>
<a href=“#3″ title=“Odkaz 3″><span>Stylový Odkaz 3</span></a>
</div>
<div class=“outer“>
<a href=“#4″ title=“Odkaz 4″><span>Stylový Odkaz 4</span></a>
</div>
<div class=“outer“>
<a href=“#5″ title=“Odkaz 5″><span>Stylový Odkaz 5</span></a>
</div>
</div>
</body>
</html>