Vysouvací menu – rozcestník
Toto menu využijeme, pokud potřebujeme do navigace umístit velké množství odkazů, například na různé servery, které obsahují podkategorie.
Zde si můžete prohlédnout výsledek. Pro správnou funkci v MSIE je třeba do kořenového adresáře stránky umístit soubor hover.htc.
Toto řešení publikoval Patrick Griffiths. Bližší popis najdete v článku The Suckerfish.
CSS
body
{
background: #eaf6ff;
font-family: ‚Arial CE‘, ‚Helvetica CE‘, Arial, sans-serif;
font-size: 15px;
}
.menu
{
padding: 0;
margin: 0;
}
.menu a
{
text-decoration: none;
color: #333;
display: block;
width: 100%;
text-align: center;
}
.menu ul, .menu li
{
list-style-type: none;
margin: 0;
padding: 0 .5em;
}
ul.uroven1 li.polozka1
{
float: left;
position: relative;
font-weight: bold;
background: #fff;
padding: .2em .5em;
height: 1em;
_width: 1px; /* IE */
}
ul.uroven2
{
position: absolute;
left: 0;
top: 1.4em;
_top: 1.6em; /* IE */
width: 120px;
background: #adf;
border: solid #8bd 2px;
visibility: hidden;
padding: .8em .5em;
}
ul.uroven2 img
{
border: solid #368 2px;
}
ul.uroven2 li.polozka2 a
{
font-weight: normal;
text-align: left;
padding: 0 .5em .1em;
margin: 0 -.5em;
}
ul.uroven2 li.polozka2 a:hover
{
background: #8bd;
}
.menu a:hover
{
text-decoration: underline;
}
ul.uroven1 li.polozka1
{
behavior: url(hover.htc);
}
ul.uroven1 li.polozka1:hover,
ul.uroven1 li.polozka1Hover
{
background: #ddd;
}
ul.uroven1 li.polozka1Hover ul.uroven2,
ul.uroven1 li.polozka1:hover ul.uroven2
{
visibility: visible;
}
XHTML
<html>
<body>
<ul class=“menu uroven1″>
<li class=“polozka1″>
<a href=““>Textil</a>
<ul class=“menu uroven2″>
<li class=“obrazek“><a href=““><img src=“64-3.jpg“ alt=““ title=““/></a></li>
<li class=“polozka2″><a href=““>oděvy</a></li>
<li class=“polozka2″><a href=““>pletené</a></li>
<li class=“polozka2″><a href=““>tkané</a></li>
</ul>
</li>
<li class=“polozka1″>
<a href=““>Elektronika</a>
<ul class=“menu uroven2″>
<li class=“obrazek“><a href=““><img src=“64-2.jpg“ alt=““ title=““/></a></li>
<li class=“polozka2″><a href=““>hi-fi</a></li>
<li class=“polozka2″><a href=““>bílá technika</a></li>
<li class=“polozka2″><a href=““>počítače</a></li>
</ul>
</li>
<li class=“polozka1″>
<a href=““>Sport</a>
<ul class=“menu uroven2″>
<li class=“obrazek“><a href=““><img src=“64-1.jpg“ alt=““ title=““/></a></li>
<li class=“polozka2″><a href=““>batohy</a></li>
<li class=“polozka2″><a href=““>boty</a></li>
<li class=“polozka2″><a href=““>zimní výbava</a></li>
</ul>
</li>
</ul>
</body>
</html>
wrecker
Zář 30, 2009 v 17:20Uvedený příklad nefunguje v IE6, v Mozilla Firefox perfektně.
wrecker
Zář 30, 2009 v 17:22Z IE6 dokonce nemohu ani zaslat tento komentář.