CSS – rozbalovací menu

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.

Prokop Zelený

Návrhář, vizionář a tvůrčí duše – tak bych se rád představil. Jsem designér, který se vášnivě zabývá uměním a estetikou. Pro mě design není pouze povolání, ale způsob života, který mi umožňuje vyjádřit svou kreativitu a ovlivnit svět kolem sebe. Mým cílem je vytvářet inovativní a funkční designová řešení, která překračují očekávání a zanechávají stopu. Každý projekt je pro mě výzvou, kterou se těším přijmout a ve které spatřuji možnost přinést něco nového a inspirativního.