rtgx

Textové menu (ul/li + css)

HTML

Základom každého menu je nečíslovaný zoznam ul/li s priradenou vlastnou CSS triedou, ktorá určuje jeho konečný vzhľad. Aktívna položka má priradenú CSS triedu menuAct.

<ul class="menu">
<li><a href="#">First</a></li>
<li><a class="menuAct" href="#">Second</a></li>
<li><a href="#">Third</a></li>
<li><a href="#">Fourth</a></li>
<li><a href="#">Third este raz</a></li>
</ul>

CSS

Príklad CSS štýlov pre prvý typ menu (pozri obr. vpravo):

ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
background: #EAEAEA;
border: 1px solid #CCCCCC;
padding: 3px 0 4px;
}

ul.menu li {
display: inline;
padding: 0;
margin: 0;
background: none;
}

ul.menu a {
position: relative;
display: block;
color: #336600;
text-decoration: none;
font: bold 10px/12px Verdana, sans-serif;
text-transform: uppercase;
background: #EAEAEA;
padding: 4px 10px 3px 8px;
}

*> ul.menu a {
padding: 3px 10px 4px 8px;
}

ul.menu a:hover {
color: #CC0000;
background: #F5F5F5;
}

ul.menu a.menuAct, ul.menu a.menuAct:hover {
color: #CC0000;
background: #F5F5F5;
}