Dynamická menu v DHTML – klikací menu 1.

28. ledna 2002

•

Po trochu obecnějším úvodu si dnes vytvoříme nabídku, která se objeví po stisknutí tlačítka myši. Opět bude zajištěna funkčnost ve všech v současnosti nejpoužívanějších prohlížečích.

Abyste měli představu o tom, jak bude vypadat výsledek našeho dnešního snažení, podívejte se na příklad.

HTML kód tvořící menu

Jak jsme si říkali již minule, menu bude tvořeno blokem obyčejného HTML, se kterým budete posléze „hýbat“. Tento blok tedy umístíte na místo na stránce, kde chcete, aby se menu nacházelo:

<div id=“menuHolder“>
<div id=“visibleMenu1″ onmousedown=“moveMenu(1);“><div class=“menuItem“>Portály<span class=“cssSupport“><br></span></div></div>
<div id=“hiddenMenu1″><div class=“menuItem“><a href=“http://atlas.cz“ class=“menuLink“>Atlas</a><br><a href=“http://centrum.cz“ class=“menuLink“>Centrum</a><br><a href=“http://seznam.cz“ class=“menuLink“>Seznam</a><span class=“cssSupport“><br></span></div></div>
<div id=“visibleMenu2″ onmousedown=“moveMenu(2);“><div class=“menuItem“>Zpravodajství<span class=“cssSupport“><br></span></div></div>
<div id=“hiddenMenu2″><div class=“menuItem“><a href=“http://cnn.com“ class=“menuLink“>CNN</a><br><a href=“http://ceskenoviny.cz“ class=“menuLink“>České Noviny</a><br><a href=“http://idnes.cz“ class=“menuLink“>iDNES</a><br><a href=“http://www.lidovky.cz“ class=“menuLink“>Lidovky</a><span class=“cssSupport“><br></span></div></div>
<div id=“visibleMenu3″ onmousedown=“moveMenu(3);“><div class=“menuItem“>Zábava<span class=“cssSupport“><br></span></div></div>
<div id=“hiddenMenu3″><div class=“menuItem“><a href=“http://www.techno.cz“ class=“menuLink“>Czech Techno</a><br><a href=“http://flashfun.cz“ class=“menuLink“>FlashFun</a><br><a href=“http://www.kompost.cz“ class=“menuLink“>Kompost</a><br><a href=“http://novinky.cz“ class=“menuLink“>Novinky</a><span class=“cssSupport“><br></span></div></div>
</div>

Nyní trochu blíže k samotnému kódu. Vidíte, že používám tagy DIV – ty slouží jako jakési kontejnery a nemají žádný formátovací význam. Mezi nimi se vždy nachází obsah pojmenovaný pomocí parametru ID. Tento identifikátor budete používat pro manipulaci s jednotlivými elementy pomocí JavaScriptu. S jeho pomocí se také dají nastavit vlastnosti konkrétního elementu pomocí CSS. Možná jste už vydedukovali, že pro nabídky, které budou viditelné již při nahrání stránky, jsem použil identifikátory visibleMenu1, 2, 3. Pro nabídky, které se mají objevit až po nějaké akci uživatele (tedy stisknutí tlačítka myši) jsem použil identifikátory hiddenMenu1, 2, 3. Nabídky, které budou viditelné již při nahrání stránky, mají navíc přiřazenu funkci moveMenu() pro událost onmousedown – této funkci se ještě budu věnovat. Celý obsah nabídky je pak uzavřen uvnitř DIVu s identifikátorem menuHolder.

Dále používám ještě tři CSS třídy (CLASS) – menuItem a menuLink přiřazují různé vizuální vlastnosti a kód ukrytý mezi tagem SPAN s třídou cssSupport (tedy <BR>) zobrazí pouze prohlížeče neznající standard CSS. Zajistí se tedy jakési formátování i v těchto prohlížečích. Ke všem třem třídám se ale ještě dostaneme.

Pokaždé do sebe vnořuji dva tagy DIV – je to kvůli chybné interpretaci CSS vlastnosti width v IE4 a IE5 (na Intervalu o tomto tématu pojednával již tento článek).

Uvedený blok kódu zobrazí jakýkoli prohlížeč webových stránek. Kód má navíc správnou logickou strukturu. Nabídky následují v pořadí: název menu, obsah menu – díky tomu bude navigace přehlednější v prohlížečích nepodporujících JavaScript nebo CSS. Kód nebude činit problémy ani vyhledávacím robotům.

Identifikace prohlížeče

Nyní je třeba zařadit prohlížeč uživatele do jedné ze dvou následujících skupin. Podle toho vytvoříte buď dynamické menu nebo necháte na stránce pouze výše zmíněný HTML kód:

Podporující DHTML – sem patří prohlížeče, které používají pro přístup k elementům webové stránky standardní zápis document.getElementById() (teorií DHTML jsem se zabýval v minulém článku). Do této skupiny patří IE od verze 5, Opera od verze 4, NS6, Mozilla a jakýkoli jiný prohlížeč podporující tento standard.
Náleží sem i prohlížeče IE4 a NS4, které používají pro přístup k elementům webové stránky nestandardní zápis document.all, resp. document.layers. Tyto nestandartní zápisy zde „toleruji“ proto, že IE4 a NS4 jsou mezi uživateli stále dosti rozšířené (i když jejich podíl den ode dne klesá). Pokud není mezi návštěvníky vašich stránek mnoho uživatelů těchto prohlížečů, nemusíte je sem zařazovat.
Pokud prohlížeč uživatele spadá do této skupiny, má proměnná dhtml (viz kód níže) hodnotu true – znamená to tedy, že se na stránce vytvoří dynamické menu.
Nepodporující DHTML – sem patří všechny prohlížeče, jejichž hodnota proměnné dhtml je false nebo ty, které vůbec nepodporují JavaScript. Proto zde ponechejte HTML kód tak, jak je – díky tomu vznikne přehledná navigace, která bude kompletně viditelná již při načtení stránky do prohlížeče (a plně přístupná i pro nevizuální prohlížeče).

Rozdělení prohlížečů jsme v reálu dosáhli použítím tohoto kódu (nachází se v hlavičce stránky, uvnitř tagu HEAD):

Přiřazení CSS vlastností jednotlivým elementům

Všechny CSS vlastnosti, které jednotlivým elementům přiřazujete, rozdělím na dynamické (vlastnosti, které mají co dělat s DHTML – display, visibility, z-index, left, top) a vizuální (všechny vlastnosti, které mají co dělat s vnějším vzhledem nabídky). Vizuální vlastnosti budou přístupné všem prohlížečům bez rozdílu, zatímco ty dynamické budou přístupné jen skupině prohlížečů podporujících DHTML.

Vizuální vlastnosti přiřadíte běžným způsobem, a to pokud možno za tagem SCRIPT obsahujícím JavaScriptový kód tvořící dynamické menu, stále v sekci HEAD:

Všimněte si, že všem elementům, které tvoří nabídku, přiřazujete šířku a většině i výšku. Všechny tyto elementy jsou totiž přesně pozicovány (k tomu se ještě dostaneme). Proto je potřeba, aby měly přesné rozměry a mohly na sebe navazovat (zde jsou výjimkou pouze elementy hiddenMenu, které nepotřebují přesnou výšku, protože na ně zdola žádný další element nenavazuje). Vzhledem k tomu, že NS4 respektuje vlastnosti width a height jen tehdy, je-li element layerem (viz minulý článek), je třeba vizuální styly definovat až po dynamických. V těch všem těmto elementům přiřazujete vlastnost position. NS4 také chybně interpretuje vizuální CSS vlastnosti. Aby i v tomto prohlížeči vypadala nabídka stejně jako v ostatních, museli byste ho formátovat pomocí tabulek, což se mi jen kvůli NS4 zdá zbytečné.

Všimněte si také třídy cssSupport, jejíž obsah bude viditelný pouze v prohlížečích nepodporujících CSS. Zajišťuje se tak formátování i v těchto prohlížečích.

Dynamické vlastnosti budete přiřazovat pomocí JavaScriptu (aby jejich přiřazení podléhalo podpoře JavaScriptu v prohlížeči a hodnotě proměnné dhtml – díky tomu máte jistotu, že budou přiřazeny jen prohlížečům podporujícím DHTML). Tento kód tedy následuje hned za proměnnými pro identifikaci prohlížeče (stále uvnitř tagu SCRIPT):

if (dhtml) document.write (‚<style type=“text/css“>#scriptSupport {display: none;} #menuHolder {position: relative; visibility: hidden; z-index: 1;} #hiddenMenu1, #hiddenMenu2, #hiddenMenu3 {position: absolute; visibility: hidden;} #visibleMenu1 {position: absolute; left: 0px; top: 0px;} #visibleMenu2 {position: absolute; left: 51px; top: 0px;} #visibleMenu3 {position: absolute; left: 135px; top: 0px;} #hiddenMenu1 {left: 0px; top: 21px;} #hiddenMenu2 {left: 51px; top: 21px;} #hiddenMenu3 {left: 135px; top: 21px;}</style>‘);

Vidíte, že všem prvkům nabídky přiřazujete absolutní pozici. Umístění elementu je v takovém případě počítáno od okrajů elementu, ve kterém je element obsažen (nadřazený element). Tento nadřazený element musí mít relativní či absolutní pozici. V tomto případě je nadřazeným elementem všech prvků nabídky element DIV s identifikátorem menuHolder. Tomu jste tedy nastavili relativní pozici. Ta se počítá jako vzdálenost od místa na stránce, kde by se element normálně nacházel. Pokud tím pádem neuvedete vlastnosti left, top, bottom ani right, zůstane element na svém původním místě.

A k čemu jsou všechny ty relativní a absolutní pozice dobré? Umožňují, aby byl element (v našem případě prvek menu) „vytržen“ z hierarchie stránky – díky tomu může tento prvek překrývat ostatní elementy – jak další prvky menu, tak další obsah stránky. Pokud byste vlastnost position nenastavili, musely by jednotlivé nabídky navazovat těsně na sebe (nemohly by se překrývat) a další obsah stránky by mohl následovat až pod všemi nabídkami.

Ještě poznámka k pozicování jednotlivých elementů: elementy hiddenMenu jsou pozicovány tak, aby svým horním okrajem o 1 pixel překrývaly elementy visibleMenu – jinak by v místech spojení těchto elementů vznikly nevzhledné dvoupixelové okraje.

Elementu menuHolder nastavuji vlastnost z-index na 1. Tato vlastnost určuje pořadí prvků ve třetím rozměru. Pokud tuto vlastnost nenastavíte, pak menu špatně překrývá další obsah stránky v prohlížečích Opera.

V kódu nastavujete i vlastnost display prvku scriptSupport na none (chcete tedy, aby se element nezobrazoval). O tomto prvku jsem ještě nemluvil – zobrazí se pouze uživatelům s prohlížeči nepodporujícími DHTML. Doporučuji ho umístit hned na začátek stránky nebo těsně před nabídku. Jeho obsah je následující:

<span id=“scriptSupport“>Tato stránka bude správně zobrazena pouze v moderním vizuálním prohlížeči, který bohužel nepoužíváte. I tak je ale stránka plně použitelná.</span>

Jestli nějaké podobné sdělení na své stránky umístíte, je jen na vás.