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 |
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í:
- Jak umístit sloupeček s odkazy vlevo (konstrukční problém)
- 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
- Tabulkou přes celou stránku
- Obtékaným divem
- Pozicováním
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
