pzeleny@kurzygrafiky.cz        Tel.: 724 810 701

Košík je prázdný

Rozbalovací menu pouze pomocí CSS (zdrojový kód)

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;}

Výsledné menu naleznete ZDE....

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.

------ © 2015 KURZY GRAFIKY ------ Všechna práva vyhrazena. Kopírovat obsah bez souhlasu autora je zakázáno.

Icons made by Freepik from www.flaticon.com is licensed by
CC BY 3.0

Soubory cookie nám pomáhají poskytovat, chránit a zlepšovat naše služby. Pokud budete náš web používat i nadále, vyjádříte tím svůj souhlas s našimi zásadami týkajícími se souborů cookie.

 

OBCHODNÍ PODMÍNKY

KURZYGRAFIKY.CZ

Prokop Zelený, DiS.
Veronské nám. 331
Praha 10  10900

pzeleny@kurzygrafiky.cz
tel.: 724 810 701

Soubory cookie nám pomáhají poskytovat, chránit a zlepšovat naše služby. Pokud budete náš web používat i nadále, vyjádříte tím svůj souhlas s našimi zásadami týkajícími se souborů cookie. Informace o cookies ZDE.

  
EU Cookie Directive Module Information