Horizontální záložkové obrázkové menu

16. února 2006

•

Toto řešení ukazuje, jak vytvořit působivé a plasticky působící horizontální menu, které využívá třech obrázků jako pozadí. Koncepce rozdělení obrázku na pozadí na tři části umožňuje mimo jiné využít i delší text položky v menu.

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

Toto řešení publikovala Stu Nicholls. Bližší popis najdete v článku FITTED DOORS.

CSS

.menu
{
clear:both;
margin-bottom:4em;
}
.menu dt
{
display:none;
}
.menu dd
{
margin:0;
padding:0;
}
.menu .aa
{
width:12px;
background:url(„menuzac.gif“);
float:left;
padding:2px 0 2px 0;
border-bottom:1px solid #000;}
.menu .bb
{
background:url(„menustred.gif“);
float:left;
padding:2px 0 2px 0;
border-bottom:1px solid #000;
text-align:center;
}
.menu .cc
{
width:12px;
background:url(„menukonc.gif“);
float:left;
padding:2px 0 2px 0;
border-bottom:1px solid #000;
}
.menu a, .menu a:visited
{
color:#525252;
text-decoration:none;
font-size:1em;
cursor:pointer;
}
.menu a:hover
{
color:#000;
background:#fff;
}
.menu a:hover span
{
background-position:0 150px;
}
.menu dd.active span
{
background-position:0 150px;
border-bottom:1px solid #fff;
}

XHTML

<html>
<body>
<div class=“menu“>
<dl>
<dt>menu</dt>
<dd><a href=“#“> Položka jedna </a></dd>
<dd><a href=“#“> Delší položka dva </a></dd>
<dd class=“active“><a href=“#“> Položka tři </a></dd>
<dd><a href=“#“> Položka čtyři </a></dd>
</dl>
</div>
 
<div class=“menu“>
<dl>
<dt>menu</dt>
<dd><a href=“#“>   Položka jedna   </a></dd>
<dd class=“active“><a href=“#“>   Dlouhá položka dva   </a></dd>
<dd><a href=“#“>   Položka tři   </a></dd>
<dd><a href=“#“>   Velmi dlouhá Položka čtyři   </a></dd>
</dl>
</div>
</body>
</html>