Hover menu
Klasické hover menu (menu reagující na kurzor).
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
ul#mainMenu, ul
{
color:000000;
padding:0;
margin:0;
list-style-type:none;
}
ul#mainMenu ul
{
margin-top:6px;
}
ul#mainMenu li
{
float:left;
padding:6px;
width:120px;
}
ul#mainMenu a
{
color:black;
background-color:#dddddd;
display:block;
border-bottom:3px solid white;
text-decoration:none;
font-weight:bold;
}
ul#mainMenu ul a
{
border-bottom:none;
border-left:1px solid #dddddd;
border-right:2px solid #dddddd;
padding-left:2px;
}
ul#mainMenu ul a:hover
{
color:blue;
border-left:5px solid white;
border-right:1px solid white;
background-color:#ffffff;
}
ul#mainMenu ul
{
position:absolute;
visibility:hidden;
border-bottom:1px solid white;
background-color:white;
}
ul#mainMenu li:hover ul, ul#mainMenu li.hover ul
{
visibility:visible;
}
ul#mainMenu li li
{
float:none;
border:none;
padding:0;
}
ul#mainMenu li
{
behavior: url(hover.htc); /* Protože IE nedodržuje CSS standarty, aby bylo řešení funkční, použijeme tento *.htc soubor */
}
XHTML
<html>
<body>
<ul id=“mainMenu>“>
<li><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><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><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>
<li><a href=“#“>Hlavní odkaz 4</a>
<ul>
<li><a href=“#“>Pododkaz 41</a></li>
<li><a href=“#“>Pododkaz 42</a></li>
<li><a href=“#“>Pododkaz 43</a></li>
</ul>
</li>
<li><a href=“#“>Hlavní odkaz 5</a>
<ul>
<li><a href=“#“>Pododkaz 51</a></li>
<li><a href=“#“>Pododkaz 52</a></li>
<li><a href=“#“>Pododkaz 53</a></li>
</ul>
</li>
<li><a href=“#“>Hlavní odkaz 6</a>
<ul>
<li><a href=“#“>Pododkaz 61</a></li>
<li><a href=“#“>Pododkaz 62</a></li>
<li><a href=“#“>Pododkaz 63</a></li>
</ul>
</li>
</ul>>
</body>
</html>
Saphire
Srp 5, 2009 v 20:32V IE 6 je to naprosto nefunkční, jinak hezké menu.
tom
Kvě 4, 2010 v 17:10ten css soubor je zbytečne komplikovaný mám trochu přehlednější způsob:
———————————————————-
css obsah:
.menu li { text-align: center; width:150px; display: block}
.menu li:hover ul{visibility: visible;}
.menu ul{visibility: hidden; position: absolute; padding: 0px}
.menu a {text-decoration: none; color: black; display: block; padding: 0px; border: 1px #456532 solid}
.menu a:hover{background-color: #a9c6FF}
.menu {display: inline-block; padding: 2px}
——————————————————–
teď ten html:
Hlavní odkaz 1
Pododkaz 1
Pododkaz 2
Pododkaz 3
Hlavní odkaz 2
Pododkaz 1
Pododkaz 2
Pododkaz 3
Hlavní odkaz 3
Pododkaz 1
Pododkaz 2
Pododkaz 3
tom
Kvě 4, 2010 v 17:12promiňte udělal jsem chybu v html takze znova ten html obsah:
<a>Hlavní odkaz 1</a>
<a href=“#“ rel=“nofollow“>Pododkaz 1</a>
<a href=“#“ rel=“nofollow“>Pododkaz 2</a>
<a href=“#“ rel=“nofollow“>Pododkaz 3</a>
<a>Hlavní odkaz 2</a>
<a href=“#“ rel=“nofollow“>Pododkaz 1</a>
<a href=“#“ rel=“nofollow“>Pododkaz 2</a>
<a href=“#“ rel=“nofollow“>Pododkaz 3</a>
<a>Hlavní odkaz 3</a>
<a href=“#“ rel=“nofollow“>Pododkaz 1</a>
<a href=“#“ rel=“nofollow“>Pododkaz 2</a>
<a href=“#“ rel=“nofollow“>Pododkaz 3</a>
Miroslav Kučera
Kvě 5, 2010 v 9:38tom: Opravil jsem vase odkazy. Diskuse pod clanky nektere znacky (jako <a>) realizuje.
P1
Bře 26, 2014 v 11:08Tom: CSS vypada kratke a jednoduche ale HTML kod neni sparvny. Zadna polozka seznamu li ani odrazkovy seznam ul ani class menu tam neni takze to nemuze komunikovat z CSS