Menu s náhledy

8. prosince 2005

•

Toto menu můžeme použít ve všech stránkách, kde potřebujeme rychle, bez klikání zobrazit podrobnější informace. Část se samotným menu je nezávislá na části pro zobrazení, z toho plyne možnost využití např. v různých side-barech, kde obvykle bývá málo místa.

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.

Podobné řešení publikoval Stu Nicholls. Bližší popis najdete v článku Sliding tab menu.

CSS

body *
{ /* pro správnou funkci v IE */
behavior: url(hover.htc );
}
#hlavni_matrjoska
{
width: 200px;
border: solid #666 1px;
}
#hlavni
{
font-family: ‚Arial CE‘, ‚Helvetica CE‘, Arial, sans-serif;
color: #333;
background: #eee;
position: relative;
cursor: default;
}
.karticka
{
border: none;
}
.karticka h3
{
margin: 0;
padding: 0;
font-size: 100%;
font-we ight: normal;
font-style: italic;
padding: .2em .5em;
}
.karticka .telo
{
border: solid #666 1px;
width: 500px;
min-height: 100px;
_height: 100px; /* IE */
background: white;
position: absolute;
top: -1px;
left: 205px;
display: none;
padding: 10px;
}
.karticka .telo p
{
margin: 0;
padding: 0;
font-weight: bold;
font-size: 80%;
text-align: justify;
}
.karticka .telo p img
{
float: left;
border: solid #666 1px;
border-top: none;
border-left: none;
margin: 0 15px 10px 0;
}
.karticka:hover .telo,
.kartickaHover .telo
{
display: block;
}
.karticka:hover h3,
.kartickaHover h3
{
background: white;
}

XHTML

<html>
<body>
<div id=“hlavni_matrjoska“>
<div id=“hlavni“>
<div class=“karticka“>
<h3 class=“zalozka“>Kiwi</h3>
<div class=“telo“>
<p><img src=“57-1.jpg“ alt=“Kiwi“ title=“Kiwi“ />Lorem ipsum…</p>
</div>
</div>
<div class=“karticka“>
<h3 class=“zalozka“>Citron</h3>
<div class=“telo“>
<p><img src=“57-2.jpg“ alt=“Citron“ title=“Citron“ />Lorem ipsum…</p>
</div>
</div>
</div>
</div>
</body>
</html>