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ř tagu nav. 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ě:
<!DOCTYPE html> <html lang='cs'> <head> <title></title> <meta charset='utf-8'> <link rel="stylesheet" href="styl.css" type="text/css" /> </head> <body> <nav> <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> <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 5</a> </li> </ul> </nav> </body> </html>
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:
nav ul li ul {
display:none;
}
nav ul li {
float:left;
list-style:none;
width:150px;
height:30px;
background:#02517F;
text-align:center;
padding-top:12px;
border-right:2px solid white;
}
nav ul li:hover {
background: #466A7F;
text-align:center;
}
nav ul ul {
margin-top:10px;
}
nav ul li ul li {
margin-left:-40px;
}
nav ul li:hover > ul {display:block;}
nav ul li ul li {background: #49BBFF;}
nav ul li ul li:hover {background: #466A7F;}