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ě:

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).

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



Doporučuji
Pro své weby používám *Webhosting C4: 20 GB prostoru, PHP, MySQL, e-maily, subdomény za 1200 Kč (zdarma 2 GB navíc každý rok). Více WebhostingC4.cz.
Potřebujete poradit?


Vyhledávání


Poradna

Pokud si nevíte rady, chcete kontakt na spolehlivého tvůrce webu, či vás zajímá cizí názor, ozvěte se.

Reklama