Horizontální vysouvací menu

1. října 2005

•

Horizontální hover menu (menu reagující na kurzor).

Je důležité, aby MSIE nebyl ve strict módu, jinak nebude menu fungovat správně. Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Anton Andreasson. Bližší popis najdete v článku Horizontal in horizontal

CSS

#navigace
{
position: relative;
width: 100%;
height: 1.05em;
margin: 0;
padding: 0;
border-bottom: 3px solid #f63;
white-space: nowrap;
}
#navigace li
{
float: left;
margin: 0 0 0 2px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #aaa #555 #f63 #999;
list-style-type: none;
}
#navigace li a
{
position: relative;
width: 6em;
display: block;
margin: 0;
padding: 1px 0.4em;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #ccc;
background-color: #eee;
color: #666;
font: normal 0.7em/120% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
}
#navigace li a:hover
{
color: #00c;
text-decoration: underline;
}
#navigace li#active a
{
font-weight: bold;
background-color: #f63;
color: #fff;
border-color: #f96 #c30 #f63 #f96;
}
#navigace li#active a:hover
{
color: #fff;
}
#navigace ul#subnavigace
{
position: absolute;
width: 100%;
left: 0;
top: 1.25em;
height: 0.75em;
margin: 0;
padding: 0;
border-bottom: 3px solid #f63;
white-space: nowrap;
}
#navigace ul#subnavigace li
{
width: 14ex;
margin: 0;
border: 0;
}
#navigace ul#subnavigace li a
{
width: auto;
padding: 0.06em 1em 0;
border: 0;
background-color: #fff;
color: #000;
font: normal normal 0.66em/110% Verdana, Arial, sans-serif;
}
#navigace ul#subnavigace li a:hover
{
color: #00c;
text-decoration: underline;
font-weight: 400; /* IE5/Mac oprava mizících tlačítek */
}
#navigace ul#subnavigace li#subactive a
{
background-color: #fc9;
color: #000;
}
* html > body #navigace, * html > body #navigace ul#subnavigace
{
width: 600px; /* IE5/Mac fixní šířka */
}

XHTML

<html>
<body>
<div id=“obalovydiv“>
<ul id=“navigace“>
<li id=“active“><a href=“#“>Hlavní odkaz 1</a>
<ul id=“subnavigace“>
<li id=“subactive“><a href=“#“>Pododkaz 11</a></li>
<li><a href=“#“>Pododkaz 12</a></li>
<li><a href=“#“>Pododkaz 13</a></li>
<li><a href=“#“>Pododkaz 14</a></li>
</ul></li>
<li><a href=“#“>Hlavní odkaz 2</a></li>
<li><a href=“#“>Hlavní odkaz 3</a></li>
<li><a href=“#“>Hlavní odkaz 4</a></li>
</ul>
</div>
</body>
</html>