Hover menu

1. října 2005

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>

Mohlo by vás také zajímat

Nejnovější

5 komentářů

  1. Saphire

    Srp 5, 2009 v 20:32

    V IE 6 je to naprosto nefunkční, jinak hezké menu.

    Odpovědět
  2. tom

    Kvě 4, 2010 v 17:10

    ten 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

    Odpovědět
  3. tom

    Kvě 4, 2010 v 17:12

    promiň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>

    Odpovědět
  4. Miroslav Kučera

    Kvě 5, 2010 v 9:38

    tom: Opravil jsem vase odkazy. Diskuse pod clanky nektere znacky (jako <a>) realizuje.

    Odpovědět
  5. P1

    Bře 26, 2014 v 11:08

    Tom: 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

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *