CSS menu

Hlavním prvkem většiny stránek je boční menu, které lze vytvořit jednoduše prostřednictvím CSS.

Jednoduché CSS menu

CSS menu, které budeme tvořit vypadá následovně:

Ač to může vypadat složitě, zdrojový kód je velmi jednoduchý. Dva sloupce a nakonec patička:

<div id="stranka" style="width:370px">
<div style="float:right;width:200px;
border:1px solid gray;padding:2px">
Co se týče strukrury webové stránky,
tak na úplném začátku by měl být samotný
obsah a až nakonci zdrojového kódu by se
měla nacházet navigace. Proto jsem do prvního
bloku vložil text stránky a do druhého text CSS
menu. Takto vytvořené stránky budou mít ve
vyhledávačích větší úspěch než obráceně
(na začátku zdroje menu pak text). 
</div>
<div style="width:150px;
border:1px solid gray;padding:2px">
<a href="javascript-menu.php3">JavaScript menu</a><br />
<a href="css.php3">CSS</a><br />
<a href="menu.php3">PHP menu</a><br />
<a href="../php/">PHP</a><br />
</div>
</div>
<div style="clear:both;border:1px solid gray;
width:370px;margin-top:2px">© Josef Novák</div>

Důležitý je prvek div id="stranka", který vymezuje šířku dokumentu (370px). Další div obashuje text stránky, důležité je nastavení CSS vlastnosti float:right, díky které se celý div nasune do prava. Třetí div je už menu s jednotlivými odkazy. Následuje ukončení celé stránky a objevuje se patička se jménem autora, která musí mít nastavenu CSS vlastnost clear:both. Tím celá práce končí.

Náhled menu (jednoduchý příklad připravený ke zkopírování)

Zajímavé odkazy

Vytvořit CSS menu není žádný problém, možná vás budou zajímat některé odkazy:

Vkládání stále stejného menu do každé stránky - PHP menu
Vysouvací JavaScript menu
Popis CSS vlastnosti clear
Popis CSS vlastnosti float

Navigace