Horizontální obrázkové menu

6. března 2006

•

Klasické float-menu s obrázkovým pozadím a hover efektem. Za zmínku stojí zde použité vertikální vycentrování jednořádkového odkazu s využitím CSS vlastnosti height a line-height.

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

Toto řešení publikoval Luke Dorny. Bližší popis najdete v článku Reflowing Folder Image Rollover Nav.

CSS

ul, li
{
margin: 0;
padding: 0;
}
.cl
{
clear: both;
}
ul.menu
{
font-size: 18px;
font-family: sans-serif;
}
ul.menu li
{
list-style-type: none;
}
ul.menu li.item
{
float: left;
width: 100px;
height: 74px;
margin-right: 5px;
margin-bottom: 5px;
}
ul.menu li.item a
{
display: block;
width: 100px;
height: 74px;
line-height: 74px; /* svisle centrovani */
text-align: center; /* vodorovne centrovani */
background: white url(’81-1.jpg‘);
color: #333;
border: solid #333 1px;
font-weight: bold;
text-decoration: none;
font-style: italic;
}
ul.menu li.item a:hover
{
background-image: url(’81-2.jpg ‚);
color: black;
border-color: #000;
}

XHTML

<html>
<body>
<ul class=“menu“>
<li class=“item“><a href=“#“>Banány</a></li>
<li class=“item“><a href=“#“>Jahody</a></li>
<li class=“item“><a href=“#“>Hrušky</a></li>
<li class=“item“><a href=“#“>Melouny</a></li>
<li class=“item“><a href=“#“>Broskve</a></li>
<li class=“cl“></li>
</ul>
</body>
</html>