Reklama

zonerbooks.cz | zoner.cz | czechia.com | regzone.cz | inshop.cz | inmail.cz | zonerpress.cz | zonerantivirus.com | zonerama.cz

interval.cz

Odrážkové horizontální menu

02. 02. 2006 | Redakce Interval.cz | Pro CSS | Komentáře: 0

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>


Reklama


Další aktuální články na interval.cz

Tematicky související články

Dejte vědět i ostatním o článku

Diskuse (počet komentářů: 0)

Buďte prvním návštěvníkem, který přidá nový komentář.

Přidat nový komentář

Jméno a e-mail jsou nepovinné. Příspěvky obsahující odkaz jsou moderovány.

Zoner AntiVirus Free pro Android
zabezpečte si svůj smartphone, zdarma
Profesionální eshop Zoner inShop od 990 Kč.
Reklama
Reklama

Syndikace

hledáme nové autory | redakce interval.cz | reklama na interval.cz

© ZONER software, a.s., všechna práva vyhrazena, interval.cz dodržuje právní předpisy o ochraně osobních údajů. Powered by WordPress.