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>
Další aktuální články na interval.cz
- Malware: android pod palbou, mobily v ohrožení?
- Pozvánka na Microsoft TechDays 2012
- Reklamní slepota: co to je a jak s ní bojovat?
- Pět důvodů, proč vybrat redakční systém Drupal
- Čeština pro WordPress 3.3.1 k dispozici
Tematicky související články
- Horizontální záložkové obrázkové menu
- Horizontální ZDnet menu
- Horizontální vysouvací menu
- Horizontální menu s šířkou nadřazeného bloku
- Horizontální menu s vertikálním písmem
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ář.
