Horizontální obrázkové blokové menu s popisem

11. května 2006

•

Toto řešení ukazuje, jak vytvořit horizontální obrázkové blokové menu s popisem. Menu využívá techniky image replacement a jako základu je využito nečíslovaného seznamu. Uvedeny jsou dvě rozdílné ukázky.

Zde si můžete prohlédnout výsledek s textem kategorie dole.

Zde si můžete prohlédnout výsledek s textem kategorie nahoře.

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku IMAGE REPLACEMENT WITH NO FLICKER.

CSS, kategorie dole

#menu
{
display:block;
height:120px;
min-height:120px;
}
#menu ul
{
margin:0;
padding:0;
list-style-type:none;
}
#menu li
{
display:block;
float:left;
margin-right:1px;
width:115px;
border:1px solid #1646a8;
}
#menu li.list1t
{
background:#1646a8 url(„pict1_bw.jpg“) no-repeat;
}
#menu li.list2t
{
background:#1646a8 url(„pict2_bw.jpg“) no-repeat;
}
#menu li.list3t
{
background:#1646a8 url(„pict3_bw.jpg“) no-repeat;
}
#menu li.list4t
{
background:#1646a8 url(„pict4_bw.jpg“) no-repeat;
}
#menu a
{
display:block;
width:115px;
padding-top:90px;
padding-bottom:5px;
text-decoration:none;
text-align:center;
color:#fff;
font: bold 76% „Trebuchet MS“, Verdana, Arial, Helvetica, sans-serif;
}
#menu a#polozka1t
{
background:transparent url(„pict1.jpg“) -115px -86px no-repeat;
}
#menu a#polozka2t
{
background:transparent url(„pict2.jpg“) -115px -86px no-repeat;
}
#menu a#polozka3t
{
background:transparent url(„pict3.jpg“) -115px -86px no-repeat;
}
#menu a#polozka4t
{
background:transparent url(„pict4.jpg“) -115px -86px no-repeat;
}
#menu a#polozka1t:hover
{
background-position:top right; z-index:50; color:#ff2;
}
#menu a#polozka2t:hover
{
background-position:top right; z-index:50; color:#ff2;
}
#menu a#polozka3t:hover
{
background-position:top right; z-index:50; color:#ff2;
}
#menu a#polozka4t:hover
{
background-position:top right; z-index:50; color:#ff2;
}

CSS, kategorie nahoře

#menu
{
display:block;
height:120px;
min-height:120px;
}
#menu ul
{
margin:0;
padding:0;
list-style-type:none;
}
#menu li
{
display:block;
float:left;
margin-right:1px;
width:115px;
}
#menu li.list1t
{
background:#077f04 url(„pict1_bw.jpg“) bottom no-repeat;
}
#menu li.list2t
{
background:#077f04 url(„pict2_bw.jpg“) bottom no-repeat;
}
#menu li.list3t
{
background:#077f04 url(„pict3_bw.jpg“) bottom no-repeat;
}
#menu li.list4t
{
background:#077f04 url(„pict4_bw.jpg“) bottom no-repeat;
}
#menu a
{
display:block;
width:115px;
padding-top:5px;
padding-bottom:90px;
text-decoration:none;
text-align:center;
color:#fff;
font: bold 76% „Trebuchet MS“, Verdana, Arial, Helvetica, sans-serif;
}
#menu a#polozka1t
{
background:transparent url(„pict1.jpg“) -15px -86px no-repeat;
}
#menu a#polozka2t
{
background:transparent url(„pict2.jpg“) -115px -86px no-repeat;
}
#menu a#polozka3t
{
background:transparent url(„pict3.jpg“) -115px -86px no-repeat;
}
#menu a#polozka4t
{
background:transparent url(„pict4.jpg“) -115px -86px no-repeat;
}
#menu a#polozka1t:hover
{
background-position:bottom right; z-index:50; color:#ff2;
}
#menu a#polozka2t:hover
{
background-position:bottom right; z-index:50; color:#ff2;
}
#menu a#polozka3t:hover
{
background-position:bottom right; z-index:50; color:#ff2;
}
#menu a#polozka4t:hover
{
background-position:bottom right; z-index:50; color:#ff2;
}

XHTML

<html>
<body>
<div id=“menu“>
<ul>
<li class=“list1t“><a id=“polozka1t“ href=“#“ title=“položka 1″>Procesory</a></li>
<li class=“list2t“><a id=“polozka2t“ href=“#“ title=“položka 2″>Paměti</a></li>
<li class=“list3t“><a id=“polozka3t“ href=“#“ title=“položka 3″>Grafické karty</a></li>
<li class=“list4t“><a id=“polozka4t“ href=“#“ title=“položka 4″>Klavesnice</a></li>
</ul>
</div>
</body>
</html>