Vertikální dvouúrovňové obrázkové menu

23. února 2006

•

Toto řešení využijeme, pokud chceme položky menu ozdobit obrázkovým pozadím. Využijeme CSS vlastnosti background-image a background-position.

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

Toto řešení publikoval Russ Weakley. Bližší popis najdete v článku Subtle box list.

CSS

body
{
font-family: sans-serif;
text-align: center; /* IE */
}
#obal
{
margin: 100px auto 0;
text-align: left;
background: #eee;
padding: 15px;
width: 70%;
}
ul, li
{
list-style: none;
font-weight: bold;
margin: 0;
padding: 0;
font-size: 14px;
width: 200px;
}
ul li a
{
display: block;
padding: .2em 1em;
color: #333;
text-decoration: none;
border: outset #666 1px;
background: url(’78-1.png‘) 0 0 repeat-y;
_width: 100%;
}
ul li li a
{
padding-left: 2em;
background: url(’78-1.png‘) -400px 0 repeat-y;
}
ul li a:hover
{
border-style: inset;
background: url(’78-1.png‘) -200px 0 repeat-y;
}
ul li li a:hover
{
background: url(’78-1.png‘) -600px 0 repeat-y;
}

XHTML

<html>
<body>
<div id=“obal“>
<ul>
<li><a href=“#“>Lorem</a></li>
<li><a href=“#“>Dolor</a></li>
<li><a href=“#“>Ipsum</a>
<ul>
<li><a href=“#“>Adipiscing</a></li>
<li><a href=“#“>Condimentum egestas</a></li>
<li><a href=“#“>Elit</a></li>
<li><a href=“#“>Porttitor</a></li>
</ul>
</li>
<li><a href=“#“>Augue</a></li>
<li><a href=“#“>Sit</a></li>
</ul>
</div>
</body>
</html>