Vertikální menu s komentáři

7. září 2006

•

Toto řešení ukazuje, jak za pomoci CSS vytvořit hover menu, kde jsou jednotlivé položky menu opatřeny komentáři, které se objevují v reakci na kurzor myši. Komentáře mohou být opatřeny i obrázky.

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

Toto řešení publikoval Eric Meyer. Bližší popis najdete v článku Pure CSS Popups.

CSS

body
{
position:relative;
background:#fff;
margin:0;
padding:0;
}
#menu
{
position:absolute;
top:60px;
left:20px;
width:166px;
height:700px;
font:16px Arial, Helvetica, sans-serif;
z-index:100;
}
#menu a
{
display:block;
text-align:center;
font:bold 1em Verdana;
text-decoration:none;
color:#FFCD38;
background:#5C85FF;
margin:0 0 1px;
padding:5px;
}
#menu a:hover
{
color:#5C85FF;
background:#FFCD38;
}
#menu a span
{
display:none;
}
#menu a:hover span
{
display:block;
position:absolute;
top:200px;
left: 0;
width:131px;
z-index:100;
color:#0038E0;
font:78% sans-serif;
text-align:center;
margin:10px;
padding:5px;
}
#menu a img
{
height: 0;
width: 0;
border-width: 0;
}
#menu a:hover img
{
position: absolute;
top: 155px;
left: 55px;
height: 50px;
width: 50px;
}

XHTML

<html>
<body>
<div id=“menu“>
<a href=“/.“>Kabeláž<img src=“kabely.jpg“ alt=“Obrázek kabelu“ />Lorem ipsum dolor sit amet…</a>
<a href=“/.“>Hi-fi věže<img src=“hifi.jpg“ alt=“Obrázek hi-fi věže“ />In bibendum sollicitudin leo…</a>
<a href=“/.“>Hodinky<img src=“hodiny.jpg“ alt=“Obrázek hodinek“ />Donec sit amet nisl tempor diam nonummy…</a>
<a href=“/.“>Kamery<img src=“kamera.jpg“ alt=“Obrázek kamery“ />Nulla dolor justo, dapibus nec…</a>
<a href=“/.“>PDA<img src=“pda.jpg“ alt=“Obrázek PDA“ />Maecenas venenatis pede eleifend ipsum…</a>
</div>
</body>
</html>