Odrážkové horizontální menu

2. února 2006

•

Toto řešení ukazuje, jak vytvořit jednoduché horizontální menu s odrážkami různých tvarů jakoby s efektem známých „tabů“. Jeho hlavní využití je v základní navigaci nebo u jednodušších layoutů.

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

Toto řešení publikoval Dan Cederholm. Bližší popis najdete v článku Mini-Tab Shapes.

CSS

.obal
{
width: 420px;
padding: 15px;
margin: 3px 0 20px 0;
border: 1px solid #ccc;
background: #fff;
}
.nav
{
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #f39e4a;
}
.nav li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
.nav a:link, .nav a:visited
{
float: left;
font-size: 12px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #bc6a19;
}
.nav a:link.active, .nav a:visited.active, .nav a:hover
{
color: #000;
background: url(„stitek.gif“) no-repeat bottom center;
}

XHTML

<html>
<body>
<div class=“obal“>
<ul class=“nav“>
<li><a href=“#“>Banány</a></li>
<li><a href=“#“ class=“active“>Datle</a></li>
<li><a href=“#“>Grapefruity</a></li>
<li><a href=“#“>Fíky</a></li>
<li><a href=“#“>Ananas</a></li>
<li><a href=“#“>Jahody</a></li>
</ul>
</div>
</body>
</html>