Horizontální ZDnet menu
ZDnet menu.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Terence Ordona. Bližší popis najdete v článku ZDnet Emulation.
CSS
#obalovydiv
{
background: #369;
border-top: 1px solid #9CC;
font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#navigace
{
list-style: none outside none;
margin: 0;
padding: 0;
}
@media all {
#navigace {
text-align: center
}
}
#navigace li
{
bottom: 11px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}
html>body #navigace li
{
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}
#navigace a, #navigace a:link, #navigace a:visited
{
background: #900;
border: 1px solid #FFF;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}
#navigace a:hover
{
background: #C00;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}
#navigace a:aktivniodkaz
{
background: #999;
bottom: 0px;
color: #FFF;
position: relative;
right: 0px;
}
#navigace li#aktivniodkaz
{
background: #369;
bottom: 13px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}
html>body #navigace li#aktivniodkaz
{
background: #000;
margin: 0 4px 0 4px;
}
#navigace #aktivniodkaz a, #navigace #aktivniodkaz a:link, #navigace #aktivniodkaz a:visited, #navigace #aktivniodkaz a:hover
{
background: #369;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 0;
color: #FFF;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}
XHTML
<html>
<body>
<div id=“obalovydiv“>
<ul id=“navigace“>
<li id=“aktivniodkaz“><a href=“#“>Aktivní odkaz</a></li>
<li><a href=“#“>První odkaz</a></li>
<li><a href=“#“>Druhý odkaz</a></li>
<li><a href=“#“>Tretí odkaz</a></li>
<li><a href=“#“>Ctvrtý odkaz</a></li>
</ul>
</div>
</body>
</html>
Mohlo by vás také zajímat
-
Webdesign: Jak optimalizovat tlačítka na webu
7. března 2024 -
9 nejzajímavějších doménových koncovek
19. srpna 2024 -
Moderní trendy ve webdesignu: Top trendy pro rok 2024
12. ledna 2024
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