Onclick menu bez reloadu i JS

27. února 2006

•

Menu je zaměřeno na využití málo známé vlastnosti HTML odkazů. Opera si s tímto řešením příliš nerozumí, proto je zde použit hack, který způsobí zobrazení posuvníku. Ten je zde nežádoucí, ale menu funguje. Tento posuvník je možné překrýt několika způsoby. V IE i Mozille menu funguje bez problémů.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku A vertical sliding sub-menu system.

CSS

a
{
color: white;
text-decoration: none;
}
#hlavni
{
width: 150px;
height: 150px;
float: left;
color: white;
}
#podmenu
{
display: block;
float: left;
width: 300px;
height: 150px;
margin-left: 10px;
overflow: hidden;
}
#hlavni ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
#hlavni li
{
width: 150px;
height: 20px;
margin-bottom: 1px;
}
#hlavni li a
{
display: block;
width: 145px;
height: 20px;
background: #597;
font-weight: bold;
text-align: center;
padding-right: 5px;
}
#podmenu dl
{
padding: 0;
margin: 0;
height: 150px;
width: 280px;
}
#podmenu dt{
width: 280px;
height: 20px;
background: #a68;
margin-bottom: 1px;
text-align: center;
padding-left: 5px;
font-weight: bold;
}
a#header
{
background: #a68 !important;
}
#podmenu dd
{
width: 280px;
height: 20px;
padding: 0;
margin: 0 0 1px 0;
}
#podmenu a.polozka
{
display: block;
width: 280px;
height: 20px;
background: #68a;
padding-left: 5px;
text-align: center;
}
/* Opera 7+ */
@media all and (min-width: 0px) {
#podmenu
{
overflow: auto;
margin-top: -3px;
}
#obal
{
position: relative;
}
#podmenu dl.prvni
{
margin-top: 3px;
}

XHTML

<html>
<body>
<div id=“hlavni“>
<ul>
<li><a id=“header“>Jednoděložné</a></li>
<li><a href=“#menu1″>Žabníkovité</a></li>
<li><a href=“#menu2″>Voďankovité</a></li>
<li><a href=“#menu3″>Šmelovité</a></li>
<li><a href=“#menu4″>Rdestovité</a></li>
<li><a href=“#menu5″>Konvalinkovité</a></li>
</ul>
</div>
<div id=“podmenu“>
<dl class=“prvni“>
<dt><a id=“menu1″>Žabníkovité</a></dt>
<dd><a class=“polozka“ href=“#menu1″>Šípatka</a></dd>
<dd><a class=“polozka“ href=“#menu1″>Žabník</a></dd>
<dd><a class=“polozka“ href=“#menu1″>Žabníček</a></dd>
</dl>
<dl>
<dt><a id=“menu2″>Voďankovité</a></dt>
<dd><a class=“polozka“ href=“#menu2″>Voďanka</a></dd>
<dd><a class=“polozka“ href=“#menu2″>Řezan </a></dd>
<dd><a class=“polozka“ href=“#menu2″>Vodní mor</a></dd>
<dd><a class=“polozka“ href=“#menu2″>Zákruticha</a></dd>
</dl>
<dl>
<dt><a id=“menu3″>Šmelovité</a></dt>
<dd><a class=“polozka“ href=“#menu3″>Šmel</a></dd>
</dl>
<dl>
<dt><a id=“menu4″>Rdestovité</a></dt>
<dd><a class=“polozka“ href=“#menu4″>Rdest (rdestice)</a></dd>
<dd><a class=“polozka“ href=“#menu4″>Rdest</a></dd>
</dl>
<dl>
<dt><a id=“menu5″>Konvalinkovité</a></dt>
<dd><a class=“polozka“ href=“#menu5″>Čípek</a></dd>
<dd><a class=“polozka“ href=“#menu5″>Pstroček</a></dd>
<dd><a class=“polozka“ href=“#menu5″>Konvalinka</a></dd>
<dd><a class=“polozka“ href=“#menu5″>Kokořík</a></dd>
</dl>
</div>
</body>
</html>