Kartičkové hover menu

1. října 2005

•

Neobvyklé hover menu s kartičkami.

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

Toto řešení publikoval Janos Horvath. Bližší popis najdete v článku Hover emulation for IE5+.

CSS

body
{
text-align:center;
background-color:white;
color:black;
}
ul#hlavniMenu
{
margin:auto;
text-align:left;
position:absolute;
top:20px;
left:50px;
}
ul#hlavniMenu, ul
{
padding:0;
margin:0;
list-style-type:none;
}
ul#hlavniMenu ul
{
margin-top:3px;
}
ul#hlavniMenu li
{
float:left;
padding:3px;
width:100px;
border:1px solid black;
background-color:white;
}
ul#hlavniMenu a
{
color:black;
display:block;
font:12px arial,sans-serif;
border-bottom:4px solid black;
text-decoration:none;
text-align:right;
}
ul#hlavniMenu ul a
{
border-bottom:none;
border-left:1px solid white;
padding-left:2px;
text-align:left;
}
ul#hlavniMenu ul a:hover
{
background-color:black;
color:white;
}
ul#hlavniMenu ul
{
background-color:white;
}
ul#hlavniMenu li:hover, ul#hlavniMenu li.hover
{
z-index:100;
border-right-width:2px;
border-bottom-width:2px;
}
ul#hlavniMenu li li
{
float:none;
border:none;
padding:0;
}
li#hlavni1
{
position:absolute;
top:3em;
left:60px;
z-index:10;
}
li#hlavni2
{
position:absolute;
top:1.5em;
left:0px;
z-index:9;
}
li#hlavni3
{
position:absolute;
top:0;
left:30px;
z-index:8;
}
ul#hlavniMenu li
{
behavior: url(hover.htc);
}

HTML

<html>
<body>
<ul id=“hlavniMenu“>
<li id=“hlavni1″><a href=““>Hlavní odkaz 1</a>
<ul>
<li><a href=““>Pododkaz 11</a></li>
<li><a href=““>Pododkaz 12</a></li>
<li><a href=““>Pododkaz 13</a></li>
</ul>
</li>
<li id=“hlavni2″><a href=““>Hlavní odkaz 2</a>
<ul>
<li><a href=““>Pododkaz 21</a></li>
<li><a href=““>Pododkaz 22</a></li>
<li><a href=““>Pododkaz 23</a></li>
</ul>
</li>
<li id=“hlavni3″><a href=““>Hlavní odkaz 3</a>
<ul>
<li><a href=““>Pododkaz 31</a></li>
<li><a href=““>Pododkaz 32</a></li>
<li><a href=““>Pododkaz 33</a></li>
</ul>
</li>
</ul>
</body>
</html>