Horizontální obrázkové blokové menu s popisem
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>
Mohlo by vás také zajímat
-
Gaming na HDR monitoru: Stojí to za to?
12. srpna 2024 -
Jak si vyzkoušet Apple Intelligence v EU
2. srpna 2024 -
NIS2: Verifikace údajů vlastníků domén
6. ledna 2025 -
AI v programování: Jak používat GitHub Copilot (část 2)
19. února 2024
Nejnovější
-
NIS2: Verifikace údajů vlastníků domén
6. ledna 2025 -
Dostali jste k vánocům PC? Využijte jeho AI potenciál!
3. ledna 2025 -
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024