Dnešní “užitečný kód” vám ukáže jak za pomoci HTML a CSS vytvořit jednoduché rozbalovací menu. Uvedený příklad je jen základ kódování, doporučuji ještě upravit vzhled, nebo přidat další grafické prvky. Rozbalovací menu jen za pomoci CSS je ideálním způsobem jak vytvořit kvalitní menu bez použití dalšího scriptování.
Nejdříve vytvořte základní strukturu HTML elementů. Celé menu je uvnitř pole (div) s názvem “menu1”. Jednotlivé záložky jsou tvořené jako seznam (ul) a položky seznamu (li). V položce, která se má rozbalovat je další vnořený seznam. Celý HTML kód vypadá následovně:
<div id=”menu1″>
<ul>
<li> <a href=”#”>Odkaz 1</a> </li>
<li> <a href=”#”>Odkaz 2</a>
<ul>
<li> <a href=”#”>Pododkaz 1</a> </li>
<li> <a href=”#”>Pododkaz 2</a> </li>
<li> <a href=”#”>Pododkaz 3</a> </li>
</ul>
</li>
<li> <a href=”#”>Odkaz 3</a> </li>
<li> <a href=”#”>Odkaz 4</a> </li>
<li> <a href=”#”>Odkaz 5</a> </li>
</ul>
</div>
Dalším krokem je vytvoření stylu pro menu. Popis jednotlivých CSS vlastností najdete v předchozích článcích zaměřených na CSS. Styly budou vypadat takto:
#menu1 a {
color:#ffffff;
font-weight:bolder;
text-decoration:none;
text-transform:uppercase;
font-family:Arial, Helvetica, sans-serif;
}#menu1 ul li ul {
display:none;
}#menu1 ul li {
float:left;
list-style:none;
width:150px;
height:30px;
background:#02517F;
text-align:center;
padding-top:12px;
border-right:2px solid white;
}#menu1 ul li:hover {
background: #466A7F;
text-align:center;
}#menu1 ul ul {
margin-top:10px;
}#menu1 ul li ul li {
margin-left:-40px;
}#menu1 ul li:hover > ul {display:block;}
#menu1 ul li ul li {background: #49BBFF;}
#menu1 ul li ul li:hover {background: #466A7F;}
Uvedený kód si můžete volně zkopírovat a použít pro váš web.
Ukázku jsem vytvořil na základě dotazu účastníka našeho kurzu Tvorba www stránek.
