Vertikální menu s komentáři
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“ /><span>Lorem ipsum dolor sit amet…</span></a>
<a href=“/.“>Hi-fi věže<img src=“hifi.jpg“ alt=“Obrázek hi-fi věže“ /><span>In bibendum sollicitudin leo…</span></a>
<a href=“/.“>Hodinky<img src=“hodiny.jpg“ alt=“Obrázek hodinek“ /><span>Donec sit amet nisl tempor diam nonummy…</span></a>
<a href=“/.“>Kamery<img src=“kamera.jpg“ alt=“Obrázek kamery“ /><span>Nulla dolor justo, dapibus nec…</span></a>
<a href=“/.“>PDA<img src=“pda.jpg“ alt=“Obrázek PDA“ /><span>Maecenas venenatis pede eleifend ipsum…</span></a>
</div>
</body>
</html>
Mohlo by vás také zajímat
-
Co je to DNSSEC, jak funguje a jak si ho nastavit?
14. srpna 2024 -
Vlastní web pomocí AI už může vytvořit opravdu každý
8. srpna 2024 -
Webový správce souborů Filestash – dojmy a recenze
29. července 2024 -
Co je to VRAM a jak ji navýšit bez drahého upgradu?
20. srpna 2024
Nejnovější
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024