Kartičkové hover menu
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>
Mohlo by vás také zajímat
-
Vlastní web pomocí AI už může vytvořit opravdu každý
8. srpna 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jak se chránit před podvody na internetu – část 2
14. října 2024
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