AJAX a menu stránky

Podľa základného spôsobu globálnej navigácie na internetových stránkach môžeme rozdeliť stránky do dvoch skupín. V prvej skupine sa používa menu s odkazmi na rázcestnikové stránky, ktoré obsahujú odkazy na stránky s podobnou tematikou, v druhej skupine sa používa rozbaľovacie menu s použitím kombinácie JavaScriptu a CSS alebo len čistých CSS štýlov. O výhodách a nevýhodách uvedených menu by sa dal napísať samostatný článok – v tomto článku je popísané menu, ktoré využíva výhody obidvoch typov menu.

Za základ menu je použité menu prvého typu s nadstavbou rozbaľovacieho menu vytvoreného pomocou techniky AJAX (Asynchronous JavaScript and XML). AJAX predpokladá spoluprácu súborov typu XHTML, JavaScriptu a CSS štýlov na strane klienta, na strane servera v našom prípade sú súbory typu PHP.

Ďalej bude uvedený stručný popis súborov, ktoré si môžete stiahnuť.

Súbor config.php

V konfiguračnom súbore sú uložené dáta vo forme polí. V poli $ids sú uložené mená identifikárov značiek li hlavného menu. V asociatívnom poli $menu sú uložené názvy a adresy URL všetkých stránok.

<?php
$title = “;
$ids = array (‚layouts‘,’effects‘,’menus‘);
$menu = array ($ids[0]=>array(
‚Fixný layout 1′,’/layouty/fixny-layout-1‘,
. . . .
‚Pružný layout 3′,’/layouty/pruzny-layout-3‘),
$ids[1]=>array (
…….
Fotogaléria‘,’/efekty/fotogaleria‘),
$ids[2]=>array(
……..
‚Menu s AJAXom‘,’/menu/menu-s-ajaxom‘),
);
?>

Súbor menu.php

V súbore je PHP script, ktorý sa používa na dynamickú tvorbu vedľajšieho menu s odkazmi na stránky s podobnou tematikou. Globálne premenné $id a $title sú inicializované na stránke index.php.

Odkazy na stránky sú uložené v značkách a, názov aktívnej stránky v značke b. Výstup výsledného reťazca je realizovaný príkazom echo.

<?php
require_once(‚config.php‘);
if (isset($_GET[‚id‘])) $id = $_GET[‚id‘];
$html = “;
if (in_array($id, $ids)) {
  for ($i = 0; $i < count($menu[$id]); $i+=2)
  if ($title == $menu[$id][$i])
    $html .= ‚<li><b>‘.$title.'</b></li>‘;
  else
    $html .= ‚<li><a href=“‚.$menu[$id][$i+1].'“>‘.$menu[$id][$i].'</a></li>‘;
}
echo $html;
?>

PHP script využíva aj AJAX na tvorbu submenu pre rozbaľovacie menu. Premenná $id je predávaná pomocou superglobálnej premennej $_GET, premenná $title je inicializovaná ako prázdny reťazec v súbore config.php.

Súbor index.php

Súbor začína spomínanou inicializáciou premenných $id a $title.

<?php
require_once(‚config.php‘);
$id = ‚menus‘;
$title =’Menu s AJAXom‘;
?>

Hlavné menu je v kóde XHTML realizované ako neusporiadaný zoznam. V značke li, v ktorej bude dynamicky tvorené submenu, je použitý identifikátor id. V prípade aktívnej stránky je uvedený len jej názov v značke b.

<ul id=“menu“>
<li><a href=“/“ title=“Úvodná stránka“>Úvod</a></li>
<li id=“layouts“><a href=“layouty“ title=“Tvorba layoutov“>Layouty</a></li>
<li id=“effects“><a href=“efekty“ title=“Rôzne efekty a triky“>Efekty</a></li>
<li><b>Menu</b></li>
<li><a href=“http://fyzika.uniza.sk/~jamnic“ title=“O autorovi, kontakt“>O autorovi</a></li>
</ul>

Vedľajšie menu je tvorené dynamicky. Dynamická tvorba vedľajšieho menu umožňuje jeho umiestnenie na stránkach s podobnou tematikou.

<h2>Menu</h2>
<ul id=“side“>
<?php require_once(‚menu.php‘); ?>
</ul>

Menu je už v tejto podobe funkčné a pracuje aj v textových prehliadačoch typu Lynx. Vyhovuje aj požiadavkám prístupnosti na web.

Súčasne s kódom XHTLM sa načítajú súbory menu.js a menu.css, ktoré poskytuje užívateľovi vizuálny efekt podobný desktopovým aplikáciám.

Súbor menu.js

JavaScriptový súbor slúži na dynamickú tvorbu submenu po načítaní stránky. JavaScript môže submenu vytvárať aj vďaka DOM (Document Object Model), preto musíme urobiť test na základné funkcie DOM. V premennej li typu poľa sú referencie na elementy li hlavného menu. V prípade, ak li obsahuje identifikátor id, dynamicky vytvoríme značku ul a pridáme do elementu li hlavného menu. Značku ul naplníme reťazcom pomocou funkcii requestHttp.

window.onload = function () {
  if (!document.getElementById||!document.createElement) return;
  var id, ul;
  var li = document.getElementById(„menu“).getElementsByTagName(„li“);
  for (var i=0; i<li.length; i++)
  if (id = li[i].getAttribute(„id“)) {
    ul = document.createElement(„ul“);
    li[i].appendChild(ul);
    requestHttp (ul,id);
  }
}

Srdcom AJAXu je JavaScript a objekt XMLHttpRequest, ktorý umožňuje vytvárať asynchrónne požiadavky (bez prerušenia činnosti stránky) na server http. (Objekt XMLHttpRequest, tvorba jeho inštancie a jej použitie, spolupráca AJAXu a PHP, sú popísané napríklad v knihe AJAX a PHP – tvoříme interaktivní webové aplikace profesionálně.)

function requestHttp(ul,id) {
  var url = ‚/menu/menu-s-ajaxom/menu.php?id=’+escape(id);
  var request = null;
  try { request = new XMLHttpRequest();}
  catch(e) {
    try { request = new ActiveXObject(‚Microsoft.XMLHTTP‘); }
    catch(e) {}
  }
  if(request != null) {
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        if (request.status == 200) {
          var li = ul.parentNode;
          if (request.responseText.charAt(0) == ‚<‚) {
            ul.innerHTML = request.responseText;
            ul.onmouseover = function () {this.className = „active“;}
            ul.onmouseout = function () {this.className = „“;}
            li.onmouseover = function () {this.className = „hover“;}
            li.onmouseout = function () {this.className = „“;}
            li.onclick = function () {this.className = „“; return true;}
          }
        }
      }
    }
    request.open(„GET“, url, true);
    request.send(null);
  }
}

Názov funkcie requestHttp vznikol prešmyčkou XMLHttpRequest s vynechaním XML. V našom prípade sa pomocou súboru menu.php načíta reťazec a nie súbor XML. Aby sa správne zobrazila diakritika, musí byť stránka kódovaná v utf-8. Ak v reťazci je prvý znak <, načítame obsah reťazca do značky ul pomocou metódy innerHTML, v opačnom prípade správu o chybe zaslanú serverom ignorujeme. Pridáme ešte referencie na udalosti generované myšou, pričom využívame spoluprácu AJAXu a CSS štýlov.

Vytvorením submenu pomocou AJAXu sa vyhneme použitiu odkazov na všetky stránky webu v zdrojovom kóde XHTML, čo je neefektívne a nie je vždy ideálne ani z hľadiska SEO. Použitie AJAXu predstavuje minimálny zásah do zdrojového kódu XHTML – definovanie identifikátorov id v značkách li hlavného menu.

Súbor menu.css

Vzhľad menu a interaktívnosť menu v spolupráci s AJAXom zabezpečujú kaskádové štýly (CSS). V úvode definujeme základné vlastnosti použitých elementov.

* {margin:0; padding:0;}
ul {list-style-type:none;}
li {float:left;}
p {margin-bottom: 0.2em;}
h1 {font-size:150%; font-weight:normal; margin-bottom:0.5em; text-align:center;}
h2 {float:right; width: 200px; color:#fff; background:#567; font-size:100%; text-align:center;}

V body definujeme základy zobrazenia fontov. Kontajner div obsahuje celú stránku aj s menu a je stredovaný vo vodorovnom smere. Je pamätané aj na hack pre staršie prehliadače MSIE (no lepšie a aj správnejšie je použiť podmienené komentáre).

body {font: small/1.7 Verdana, Arial, sans-serif; color:#333; background:#fff; text-align:center;}
div {margin:auto; width:700px; text-align:left; position:relative;}

Pozadie pre hlavné menu je definované v elemente ul(#menu) a vlastné zobrazenie odkazu v elemente a, alebo v prípade aktívnej stránky v elemente b.

#menu {float:left; width: 100%; background:#ededed url(menu.gif) left bottom repeat-x;
border-bottom:1px solid #567; border-top:1px solid #c00;}
#menu li a, #menu li b {display:block; padding:4px 12px; border-bottom:4px solid #fff; color:#000;
text-decoration:none;}
#menu li b {border-bottom-color:#567;}
#menu li a:hover, #menu li.hover a {color:#c00; border-bottom-color:#c00;}

Zobrazenie vedľajšieho menu a submenu je spoločné. Líšia sa len v značke ul, kde submenu vedľajšieho menu je definované ako sprava obtekajúci blok, submenu ako absolútne polohovaný blok. Je čiastočne priezračný. (Vlastnosť opacity má byť definovaná v CSS3. V  MSIE je použitá funkcia filter, z týchto dôvodov nie sú CSS štýly validné podľa W3C.)

#side, #menu li ul {width:200px; background:#eee;}
#side {clear: both; float:right;}
#side li {width: 100%;}
#menu li ul {position:absolute; display:none; border-top:1px solid #567;}
#menu li.hover ul {display:block; filter:alpha(opacity=80); opacity:0.8;}
#menu li.hover ul.active {filter:none; opacity:1;}
#menu li.hover ul li a, #side li a, #side li b {display:block; padding:0 0 0 18px; width:180px !important; width:100%; wid\th:180px; border:1px solid #567; border-top:none; color:#000; background:transparent url(icon.gif) 3px 50% no-repeat; text-decoration:none;}
#menu li.hover ul li a:hover, #side li a:hover {color:#c00; background-color:#fff;
border-bottom-color:#567; text-decoration:underline;}

Môžete si pozrieť ukážku menu. (Odkazy v menu sú na stránky webu, ktorého súčasťou je aj stránka s menu popísaného v tomto článku.)

Původní diskuse ke článku

Původní diskuse k tomuto článku naleznete zde.