Horizontální menu s náhledem stránky

19. května 2006

•

Toto menu se hodí spíše pro konstrukce, ve kterých je dobré k položkám menu uvést delší popis, třeba i s obrázky nebo jinými XHTML prvky.

Zde si můžete prohlédnout výsledek. Pro správnou funkci v MSIE je třeba do kořenového adresáře stránky umístit soubor hovermenu.htc.

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku CROSS BROWSER TABBED PAGES WITH EMBEDDED LINKS

CSS

#menu
{
position: relative;
top: 0;
left: 0;
height: 20em;
}
#menu .polozka
{
float: left;
}
#menu .zalozka
{
background: #dab;
margin: 0 2px 0 0;
padding: 0 .5em;
font-size: 20px;
}
#menu .zalozka a
{
color: #333;
text-decoration: none;
}
#menu .ramecek
{
position: absolute;
top: 23px;
left: 0;
width: 600px;
padding: 20px;
visibility: hidden;
background: #caf;
}
#menu .telo
{
overflow: auto;
height: 15em;
background: #fca;
padding: .5em 1em;
text-align: justify;
}
#menu .telo img
{
float: left;
margin: 0 1em .5em 0;
border: solid #666 1px;
}
#menu .polozka
{
behavior: url(hovermenu.htc); /* IE */
}
#menu .polozkaHover .ramecek,
#menu .polozka:hover .ramecek
{
visibility: visible;
}
#menu .polozkaHover .zalozka,
#menu .polozka:hover .zalozka
{
background: #caf;
}

XHTML

<div id=“menu“>
<div class=“polozka“>
<div class=“zalozka“><a href=“#“>Curabitur imperdiet</a></div>
<div class=“ramecek“>
<div class=“telo“>
<p><img alt=““ src=“99-1.jpg“ />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris in erat eu purus adipiscing consectetuer. Donec tincidunt. Donec diam neque, dignissim in, tempus nec, tincidunt ac, magna. Aliquam nec nunc. Phasellus tristique odio at dolor. Nam aliquam, risus mollis venenatis rutrum, ligula nibh semper augue, at facilisis erat massa sed leo. Morbi laoreet blandit nunc. Mauris dui magna, ornare quis, luctus sit amet, ultricies vitae, mauris. Nullam sed sapien nec sapien porta ultricies. Etiam et metus. Curabitur quis lacus non augue iaculis pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean at arcu. Fusce egestas commodo leo. Aliquam erat volutpat. Nullam elementum laoreet urna. Cras pretium mollis est. Praesent pretium. Phasellus in urna.</p>
<p>Duis scelerisque auctor mauris. Curabitur imperdiet sem sit amet nisl. Vestibulum pulvinar. Praesent in erat. Nulla nec leo id lectus viverra dapibus. Donec orci justo, dictum eu, tincidunt quis, pellentesque egestas, tellus. Aliquam eu mauris. Curabitur ante neque, facilisis et, lacinia quis, pellentesque sollicitudin, diam. Phasellus ante lorem, tristique et, aliquam id, eleifend id, sapien. Nulla hendrerit nonummy elit. In hac habitasse platea dictumst. Nam egestas. In dignissim. Integer consectetuer ultricies tellus. Integer vel arcu. In gravida felis vitae pede.</p>
</div>
</div>
</div>
<div class=“polozka“>
<div class=“zalozka“><a href=“#“>Morbi hendrerit</a></div>
<div class=“ramecek“>
<div class=“telo“>
<p><img alt=““ src=“99-2.jpg“ />Etiam diam. Morbi hendrerit porta diam. Suspendisse velit quam, porta ut, mollis sed, bibendum id, quam. Aenean aliquam aliquam diam. Ut odio nunc, adipiscing ut, commodo ut, cursus rhoncus, dolor. Nam in quam sed urna iaculis laoreet. Phasellus neque justo, blandit vel, nonummy vitae, fringilla at, orci. Duis laoreet consectetuer dui. Vestibulum felis eros, mollis sed, semper vel, varius in, eros. Phasellus eu leo non odio porta convallis. Vivamus condimentum, diam vel dictum sodales, turpis ante elementum odio, in gravida felis tellus a eros. Integer ornare ante eget tortor. Morbi pretium, nisl a sagittis scelerisque, velit elit tempor odio, ac aliquet augue dolor eget nisl. Suspendisse euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum placerat tincidunt lorem. Nunc adipiscing lacus sit amet ante. Quisque tincidunt. Mauris vehicula lacus.</p>
<p>Nam condimentum sem id magna. Etiam fringilla, risus vitae congue nonummy, leo quam hendrerit enim, sed fermentum diam lorem tristique elit. Vivamus posuere mattis orci. Vivamus condimentum pede non arcu. Morbi iaculis, quam eget sodales semper, lacus purus vulputate purus, nec sagittis tortor magna at nisi. Sed ultrices nisl quis libero. Cras condimentum placerat metus. Nullam malesuada tortor in metus vestibulum vulputate. Suspendisse potenti. Nam sed leo.</p>
</div>
</div>
</div>
<div class=“polozka“>
<div class=“zalozka“><a href=“#“>Phasellus tincidunt</a></div>
<div class=“ramecek“>
<div class=“telo“>
<p><img alt=““ src=“99-3.jpg“ />Proin lobortis. Mauris in metus a nulla imperdiet sollicitudin. Etiam nibh diam, hendrerit non, blandit at, fermentum vel, dolor. Nullam sed justo. Praesent eu lacus. Donec fermentum dui sit amet urna. Pellentesque tempor condimentum ipsum. Morbi lobortis risus vel mauris. Etiam porttitor. Phasellus ut nulla. Integer adipiscing, dui sed fermentum euismod, nibh ante semper ante, eget dictum mi magna vel est.</p>
<p>In nec mi et quam viverra tempus. Phasellus tincidunt, elit vitae vulputate pretium, augue augue dictum quam, id nonummy nulla arcu a diam. Phasellus erat dui, consequat eget, cursus vel, placerat ac, libero. Duis semper lorem aliquet ipsum. Etiam tempus libero congue velit. Nunc luctus volutpat nisi. Curabitur molestie mollis velit. Nam nec lacus a orci molestie cursus. Vestibulum lacinia nunc sit amet quam. Morbi interdum. Aliquam felis sapien, gravida in, mollis eget, posuere id, enim. In lorem enim, placerat eget, tristique et, scelerisque sed, mi. Morbi tincidunt pede ac leo. Curabitur in ipsum ut pede tincidunt lobortis. Vestibulum tincidunt suscipit ligula. Integer a massa viverra dui interdum pulvinar. Donec congue dolor quis tellus. Vestibulum aliquam ipsum et purus.</p>
</div>
</div>
</div>
<div class=“cl“></div>
</div>
</body>
</html>