Horizontální průhledné hover menu

9. května 2006

•

Toto menu patří spíše mezi ta ozdobnější. Pomocí několika částečně průhledných obrázků docílíme snadno velmi pěkných efektů. Toto menu funguje ve všech prohlížečích, kromě Microsoft Internet Exploreru, který nepodporuje standardním způsobem průhlednost (alfa kanál) u PNG obrázků. Proto je z důvodu zajištění alespoň částečné funkčnosti v MSIE použita proprietární vlastnost „filter“.

Zde si můžete prohlédnout výsledek. Pro správnou funkci v MSIE je třeba do kořenového adresáře stránky umístit soubor hovermenu.htc.

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku A CSS ONLY FLYOUT MENU WITH TRANSPARENCY.

CSS

#hlavni
{
border: solid #333 1px;
background: url(’96-1.jpg‘) left top no-repeat;
width: 800px;
height: 230px;
color: white;
font-size: 20px;
font-family: sans-serif;
}
ul, li
{
list-style: none;
margin: 0;
padding: 0;
}
ul.uroven1
{
width: 150px;
margin: 20px;
}
ul.uroven2
{
position: absolute;
width: 600px;
left: 149px;
top: -1px;
visibility: hidden;
}
li.uroven1
{
position: relative;
border: solid white 1px;
background: transparent url(’96-3.png‘) left top repeat;
margin-bottom: -1px;
width: 149px;
margin-bottom: 3px;
behavior: url(hovermenu.htc);
}
li.uroven2
{
float: left;
width: 180px;
border: solid white 1px;
background: transparent url(’96-2.png‘) left top repeat;
margin-right: -1px;
filter:alpha(opacity=80);
behavior: url(hovermenu.htc);
}
li a
{
display: block;
color: white;
text-decoration: none;
padding: .2em .5em;
_width: 149px; /* IE */
_height: 29px; /* IE */
}
li.uroven2 a
{
_width: 179px; /* IE */
}
li.uroven1:hover, li.uroven1Hover
{
background-image: url(’96-2.png‘);
}
li.uroven2:hover, li.uroven2Hover
{
background-image: url(’96-4.png‘);
}
ul.uroven1 li.uroven1Hover ul.uroven2,
ul.uroven1 li.uroven1:hover ul.uroven2
{
visibility: visible;
}

XHTML

<html>
<body>
<div id=“hlavni“>
<ul class=“uroven1″>
<li class=“uroven1″><a href=“#“>sekce 1</a>
<ul class=“uroven2″>
<li class=“uroven2″><a href=“#“>podsekce 1.1</a></li>
<li class=“uroven2″><a href=“#“>podsekce 1.2</a></li>
</ul>
</li>
<li class=“uroven1″><a href=“#“>sekce 2</a>
<ul class=“uroven2″>
<li class=“uroven2″><a href=“#“>podsekce 2.1</a></li>
<li class=“uroven2″><a href=“#“>podsekce 2.2</a></li>
<li class=“uroven2″><a href=“#“>podsekce 2.3</a></li>
</ul>
</li>
<li class=“uroven1″><a href=“#“>sekce 3</a>
<ul class=“uroven2″>
<li class=“uroven2″><a href=“#“>podsekce 3.1</a></li>
</ul>
</li>
<li class=“uroven1″><a href=“#“>sekce 4</a>
<ul class=“uroven2″>
<li class=“uroven2″><a href=“#“>podsekce 4.1</a></li>
<li class=“uroven2″><a href=“#“>podsekce 4.2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>