Levé menu

tvorba a údržba rozvržení stránky

Móda levého sloupečku

Dnes už skoro nepotkáte stránku, která by po levé straně neměla proužek s odkazy. Většinou vypadá rozvržení stránek takto:

Nějaké záhlaví
Levé menu
odkaz
odkaz
odkaz
odkaz
mail
Hlavní text stránky

Text stránky je celý uzavřený v tabulce. Bla bla bla, spousta moudrých věcí.

Takovéto rozvržení přináší mnoho výhod, jako například přehlednost, stejný motiv příbuzných stránek nebo zúžení hlavního textu. Někdy se přidává ještě pravý sloupeček, ideální to místo pro reklamy a upoutávky.

Jak to udělat

Většina používaných postupů se dá dobře ilustrovat při omezení výkladu na tvorbu levého sloupečku. S tím jsou spojeny dva problémy, lépe řečeno rozhodnutí:

  1. Jak umístit sloupeček s odkazy vlevo (konstrukční problém)
  2. Jak naplnit a udržovat obsah toho sloupečku aktuální při případných změnách (organizační problém)

Naplnění a údržba velmi závisí na konkrétních podmínkách autora. Umístění sloupečku odkazů vlevo je problém užší -- omezuje se na HTML, popřípadě CSS, takže tím začnu.

Možnosti umístění sloupečku vlevo:

Rámy

Z metodiky rámů se vlastně obliba levého sloupečku vyvinula. Rámy představují velmi snadnou cestu tvorby a aktualizace levého sloupečku (a historicky nejstarší). Mají však řadu chyb a problémů, kvůli nimž tuto metodu nemohu doporučit těm, kteří berou stavbu webu vážně. Zájemce odkazuji na základy rámů.

Tabulka přes celou stránku

Dnes nejpoužívanější metoda získala mnoho kladných bodů svojí spolehlivostí, protože se ve všech prohlížečích zobrazuje téměř nachlup stejně. Drobnou nevýhodou je pomalé zobrazování stránky, protože celá stránka se zobrazí až ve chvíli, kdy se načte celá ta tabulka.

Příklad jednoduché tabulky přes celou stránku:

<body>
<table border="0" cellpadding="6" cellspacing="0">

<tr> <td bgcolor="barva" width="150">Levé menu</td>

<td bgcolor="barva" width="600">Text stránky</td>
</tr> </table>
</body>

Detaily této metody lze nalézt u designu pomocí tabulek.

Obtékaný div

Dnes nejoblíbenější metoda. Na menu se dá použít plovoucí oddíl = tag <div>. Do divu se vloží obsah menu. Stylem se divu nastaví obtékání (float) a šířka (width):

<div style="float:left; width: 150px;">obsah menu</div>
text stránky

Tím se menu umístí k levému okraji stránky a ostatní text jej obtéká. V některých případech to stačí, ale často vzniká efekt, který se lidem moc nelíbí. Tam, kde menu končí, totiž text stránky začíná natékat i pod menu.

Řešení existuje a totiž uzavřít text stránky také do divu a tomu dát buď také float: left a šířku: 

<div style="float:left; width: 150px">plovoucí oddíl</div>
<div style="float:left; width: 600px">text stránky</div>

nebo mu dát margin-left stejný (nebo trošku větší), jako je šířka menu:

<div style="float:left; width: 150px;">plovoucí oddíl</div>
<div style="margin-left: 150px;">text stránky</div>

Další výhodou obtékaného designu je to, že můžete menu klidně umístit i na konec dokumentu (pro některé vyhledávače může být výhodou obsah na začátku a menu na konci). Výše nastíněný postup s float:left; by způsobil, že by menu pak bylo vpravo. Pokud chcete mít menu na konci dokumentu, ale na stránce vlevo, stačí ve výše zmíněných konstrukcích namísto float:left; napsat float: right;.

Pozicování

Pomocí CSS pozicování lze umístit libovolný objekt kamkoli do stránky. Pokud se hlavní text odšoupne kousek doprava (ať už pozicováním nebo nastavením margin-left), zbude vedle něj místo, kam lze umístit absolutně pozicovaný levý sloupeček.

Příklad:

<body style="margin-left: 150px">
Text stránky
<div style="width: 150px; position: absolute; left: 0px; top: 0px">
Levé menu
</div>
</body>

Propracovanější příklad (trochu jinak strukturovaný) je popsán u tvorby sloupců pozicováním. (Pravý sloupeček lze takhle také udělat, je to trochu těžší.) Použitý tag <div> se používá na obalování větších kusů textu.

Některé starší prohlížeče a editory nerozumějí pozicování, těch je ale dnes už málo. Takže jediným dnešním problémem této metody je prázdné místo pod bočními sloupečky, ale i to má řešení (popsané v sloupcích pozicováním).

Fantastická výhoda tohoto řešení spočívá v tom, že (narozdíl od tabulek) se sloupečky (a případné hlavičky) načítají až po hlavním textu a zobrazuje se to hned. Díky tomu čtenář nemusí moc čekat. Samozřejmě se sloupečky mohou načítat předem, prostě na pořadí nezáleží.

Osobně mám pozicování moc rád a řeším jeho pomocí spoustu navigačních prvků.

Menu až dolů

Výše popsané metody obtékání a pozicování mají problém v tom, že někteří lidé chtějí mít menu jako podbarvený sloupeček až do konce stránky. To je docela problém a pomocí obyčejných divů se to udělat nedá. Jediné spolehlivé řešení (nepočítám-li tabulku) je Pixyho dvousloupcový beztabulkový layout (je to tam i česky) s použitím obrázkových pozadí.

 Naplnění a aktualizace obsahu menu

Původní pokračování této stránky, které pojednává o tom, jak při změnách snadno aktualizovat obsah menu, jsem přenesl do samostatné stránky Skládání stránek z kousků.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.