Menu s náhledy
08. 12. 2005 | Redakce Interval.cz | Pro CSS | Komentáře: 0
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>
Další aktuální články na interval.cz
- Chamurappiho Webylon: čtyři články s kritikou W3C
- Nenápadný cloud: synchronizace dat z prohlížečů
- Pozvánka: Random Hacks of Kindness 2012
- Zajímavost o češtině pro redakční systém WordPress
- Pozvánka na konferenci o vyhledávačích zboží 2012
Tematicky související články
- Horizontální menu s vertikálním písmem
- Kartičkové hover menu
- Horizontální vysouvací menu
- Hover menu
- Vertikální menu s komentáři
Dejte vědět i ostatním o článku
Diskuse (počet komentářů: 0)
Buďte prvním návštěvníkem, který přidá nový komentář.
