Dynamická menu v DHTML – teoretický úvod

22. ledna 2002

•

Dnešním článkem začínáme seriál, ve kterém se budeme zabývat vytvářením dynamických menu pomocí DHTML tak, aby fungovala ve všech nejpoužívanějších prohlížečích (Internet Explorer 4+, Netscape 4+, Opera 4+, Mozilla). Současně bude menu vhodné i pro nevizuální prohlížeče a vyhledávací roboty.

Co byste měli znát

Měli byste dobře ovládat HTML spolu s CSS a znát alespoň základy JavaScriptu. O všech těchto jazycích již vyšly na Intervalu seriály vhodné i pro úplné začátečníky, a proto není problém svoji případnou neznalost dohnat. Méně známe konstrukce se budu snažit vysvětlovat – pokud na něco zapomenu, rád vám odpovím v diskusi pod článkem.

Řekni, jaký máš prohlížeč

V celém seriálu se budete setkávat s rozdílnou interpretací zdrojového kódu v různých prohlížečích. Proto vás nyní „seznámím“ s jednotlivými prohlížeči, abych se k nim nemusel neustále vracet (v závorce uvádím zkratku – Internet Explorer 4 (IE4), 5.5 (IE5) a 6 (IE6), Netscape 4.06, 4.51 a 4.7 (z našeho pohledu není mezi Netscape čtyřkových verzí žádný rozdíl, a proto je budu označovat NS4), Netscape 6.1b1 (NS6), Opera 4, Opera 5.12 (Opera 5), Opera 6 a Mozilla 0.9.3 (Mozilla). Všechny prohlížeče běží na Windows 98. Pokud se budu zmiňovat o prohlížeči zkratka verze+, znamená to, že tím myslím prohlížeč daného jména od této verze výše (například zkratkou IE 4+ myslím Internet Explorer 4, 5 i 6). Menu, která budete vytvářet, budou většinou funkční ve všech těchto prohlížečích. Někdy se ale výsledný kód kvůli konkrétnímu prohlížeči (především NS4) značně prodlouží a bude jen na vás, jestli kód použijete nebo daný prohlížeč oželíte.

Na co byste neměli zapomenout

Technologie Dynamického HTML umožňuje přistupovat k elementům webové stránky a jejich vlastnostem pomocí skriptovacího jazyka a dovoluje tvůrci stránek měnit dynamicky obsah stránky v závislosti na akcích uživatele. Jako skriptovací jazyk se v drtivé většině případů používá JavaScript a ani náš seriál nebude výjimkou. K elementům je možné přistupovat pomocí standardního zápisu. Tento standard byl definován ve specifikaci DOM World Wide Web Consortiem) document.getElementById(‚ID elementu‚) a k vlastnostem, které jsou definovány v CSS, pomocí vžitého document.getElementById(‚ID elementu‚).style.CSS vlastnost. Za ID elementu přitom musíte doplnit jméno elementu, které jste specifikovali v parametru ID – tento parametr můžete použít téměř u každého tagu v HTML 4.

Kromě tohoto způsobu přístupu k elementům existují ještě dvě nestandardní řešení – to první je dílem Microsoftu a je v IE4+. Jeho syntaxe je document.all[‚ID elementu‚] nebo document.all.ID elementu, pro CSS vlastnosti potom document.all[‚ID elementu‚].style.vlastnost nebo document.all.ID elementu.style.vlastnost.

Druhé řešení pochází od firmy Netscape – NS4. Ačkoli vznikal tento prohlížeč v době, kdy již byly definovány standardy dynamického HTML, není těmito standardy příliš „poznamenán“. Pokud budete chtít, aby vaše DHTML výtvory fungovaly i v tomto prohlížeči, budete muset brát v úvahu principy, které jsou značně odlišné od ostatních prohlížečů: V momentě, kdy je kterýkoli element pozicován relativně či absolutně (pomocí CSS vlastnosti position a hodnot relative či absolute), považuje ho NS4 za tzv. layer, k němuž můžete přistupovat v JavaScriptu pomocí zápisu document.layers[‚ID elementu‚] nebo document.ID elementu, k CSS vlastnostem potom pomocí document.layers[‚ID elementu‚].CSS vlastnost nebo document.ID elementu.CSS vlastnost.

Pokud je layer vnořen do jiného layeru, musíte k němu přistupovat pomocí zápisu document.layers[‚ID nadřazeného layeru‚].document.layers[‚ID cílového layeru‚] (samozřejmě byste mohli použít i druhý zápis zmiňovaný výše). Pokud je layer vnořen ještě do dalších layerů, museli byste analogicky zahrnout i tyto další layery.

Účinná navigace

Navigace je bezpochyby jednou z nejdůležitějších částí webové stránky. Umožňuje návštěvníkovi a vyhledávacím robotům dostat se na další stránky webu, a proto musí být použitelná v kterémkoli prohlížeči (včetně nejrůznějších prohlížečů pro nevidomé) a zároveň i přístupná pro vyhledávácí roboty. V opačném případě autor riskuje, že se o stránce nikdo nedozví, protože fulltextové vyhledávání je dnes stále nejpoužívanější metodou vyhledávání. Znamená to tedy, že se celá navigace musí nacházet uvnitř tagu BODY a musí být tvořena pomocí běžného HTML. Odkazy musí být definovány pouze pomocí tagů A. Správná navigace by tedy měla vypadat zhruba takto:

<html>
  <head>
    <title>Stránka se správnou navigací</title>
  </head>
  <body>
    <a href=“clanky.html“>Články</a>…
  </body>
</html>

V tomto případě je navigace přístupná jakémukoli interpretovi, který podporuje standard HTML, lhostejno zda zná či nezná JavaScript.

Až do teď jsme se bavili pouze o navigaci obecně. Nyní budete tyto poznatky aplikovat i na dynamická menu. Je poměrně vžitou domněnkou mezi tvůrci webových stránek (alespoň já to tak cítím), že taková menu nelze zpřístupnit všem prohlížečům ani vyhledávacím strojům, protože se vytváří pomocí „tajemného DHTML“. Tito tvůrci vytvářejí dynamická menu většinou takto:

<html>
  <head>
    <title>Stránka s navigací pomocí špatně řešeného menu</title>
    <script type=“text/javascript“>
    function makeMenu()
    {
      document.write(‚<span onclick=“menuGo(1);“>Články</span> další obsah menu…‚);
    }
    </script>
  </head>
  <body>
    <script type=“text/javascript“>
    makeMenu();
    </script>
  </body>
</html>

Prohlížeče, které nepodporují JavaScript (včetně prohlížečů pro nevidomé) nebo mají jeho podporu vypnutou, se nedostanou na další stránky webu. U uživatelů těchto prohlížečů to má jediný výsledek – stránku rychle opustí a už se sem pravděpodobně nikdy nevrátí. Samozřejmě ani vyhledávací roboti se nedostanou na další stránky a tím pádem je nezařadí do své databáze.

Dnešním spíše teoretickým úvodem jsme si připravili půdu pro další díly našeho seriálu, ve kterém se již budeme zabývat konkrétními dynamickými menu. V příštím díle to bude menu, které se objeví po stisknutí tlačítka myši.