Odrážkové horizontální menu
Obsah
Související
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>
Mohlo by vás také zajímat
-
-
-
Jak nainstalovat šablonu ve WordPressu
23. července 2024 -
Vstupte do éry umělé inteligence: ASOME Max Studio s AMD Ryzen™ 9 7940HS
14. listopadu 2023
Nejnovější
-
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024