Durch die Einführung von npage Script wurde die automatiserte Erstellung einer Navigationsleiste in einem eigenen Design deutlich erleichtert. Wenn man ein eigenes Design nutzt, muss man normalerweise alle Navigationslinks fest in den Design-Style einfügen. Will man die Navigationsleiste anpassen, z.B. weil neue Inhaltsseiten hinzukommen oder weil sich die Adresse einer verlinkten Seite ändert, so muss man den Design-Style anpassen. Das kann unter Umständen mühseelig sein, macht auf jeden Fall zusätzlich Arbeit.
Mit nPage Script geht das deutlich einfacher -zumindest, wenn man sich ein klein wenig mit der Materie vertraut gemacht hat, denn nPage Script nutzt die in der nPage Seitenbeabreitung angelegte Navgigationstruktur mit Haupt- und Untermenüpunkten. Wenn man eine Navigationsstruktur mit nPage Script in den Design Style eingebaut hat, dann wird jede Änderung automatisch übernommen.
In der nPage Hilfe werde erste Grundlagen vermittelt, wie man vorgehen muss, um eine Navigation mit Hilfe von nPage Script zu erzeugen:
An diese Informationen möchte ich hier anküpfen und zeigen, wie man genau vorgehen muss.
Ich fange zunächst mit genau dem Code an, den man in der nPage Hilfe findet
{protected}
<ul>
{foreach from=$menu item=menu_item}
{if $menu_item.type == 'link_internal_textpage' || $menu_item.type == 'link_internal_extra' || $menu_item.type == 'link_external'}
<li class="menu"><a target="{$menu_item.target}" href="{$menu_item.link}"{$menu_item.additional_attributes}>{$menu_item.title}</a></li>
{elseif $menu_item.type == 'submenu'}
<li class="menu"><a onclick="javascript:submenu('submenu_own_{$menu_item.id}'); return false;" href="#"{$menu_item.additional_attributes}>{$menu_item.title}</a></li>
{foreach from=$menu_item.subitems item=submenu_item}
{if $submenu_item.type == 'link_internal_textpage' || $submenu_item.type == 'link_internal_extra' || $submenu_item.type == 'link_external'}
<li class="menu submenu_item submenu_own_{$menu_item.id}" style="display: none;"><a target="{$submenu_item.target}" href="{$submenu_item.link}"{$submenu_item.additional_attributes}>{$submenu_item.title}</a></li>
{elseif $submenu_item.type == 'heading'}
<li class="menu submenu_item menu_heading submenu_own_{$menu_item.id}" style="display: none;">{$submenu_item.title}</li>
{elseif $submenu_item.type == 'separator'}
<li class="menu submenu_item menu_separator submenu_own_{$menu_item.id}" style="display: none;"><hr{$submenu_item.additional_attributes} /></li>
{/if}
{/foreach}
{elseif $menu_item.type == 'heading'}
<li class="menu menu_heading">{$menu_item.title}</li>
{elseif $menu_item.type == 'separator'}
<li class="menu menu_separator"><hr{$menu_item.additional_attributes} /></li>
{/if}
{/foreach}
</ul>
{/protected}
Das Original-Script enthält alle Menüpunkte einschließlich der Überschriften, Trennlinien, externen Links und Extras. Auch die Textseiten in den Untermenüs werden abgefragt. Durch diese umfassende Informationssammlung wirkt dieses Script sehr kompliziert. Wir werden es schrittweise vereinfachen.
Wie bereits beschrieben, enthält dieses Beispiel alle über nPage Script verfügbaren Informationen über die Navigation, also z.B. auch Trennlinien und Überschriften. Untermenüs mit weiteren navigationspunkten kann man durch Klick auf den Hauptmenüpunkt aufklappen. Für eine praktische Verwendung in einem Design Style zu einem eigenen Design ist diese Variante aber zu umfangreich. Ich werde sie in den folgenden Schritten weiter vereinfachen.
Wie bereits beschrieben, werde ich den Orginalcode schrittweise vereinfachen, so dass er schließlich sinnvoll in ein eigenes Design eingebaut werden kann
<ul>
{foreach from=$menu item=menu_item}
{if $menu_item.type == 'link_internal_textpage' || $menu_item.type == 'link_external'}
<li class="menu"><a target="{$menu_item.target}" href="{$menu_item.link}"{$menu_item.additional_attributes}>{$menu_item.title}</a></li>
{elseif $menu_item.type == 'submenu'}
<li class="menu"><a onclick="javascript:submenu('submenu_own_{$menu_item.id}'); return false;" href="#"{$menu_item.additional_attributes}>{$menu_item.title}</a></li>
{foreach from=$menu_item.subitems item=submenu_item}
{if $submenu_item.type == 'link_internal_textpage' || $submenu_item.type == 'link_external'}
<li class="menu submenu_item submenu_own_{$menu_item.id}" style="display: none;"><a target="{$submenu_item.target}" href="{$submenu_item.link}"{$submenu_item.additional_attributes}>{$submenu_item.title}</a></li>
{/if}
{/foreach}
{/if}
{/foreach}
</ul>
{/protected}
Man sieht hier, dass der nPage Script Code bereits deutlich übersichtlicher ist, denn die Anzeige von Extras, Trennlinien und Überschriften wird unterbunden.
<ul>
{foreach from=$menu item=menu_item}
{if $menu_item.type == 'link_internal_textpage' || $menu_item.type == 'link_external'}
<li class="menu"><a target="{$menu_item.target}" href="{$menu_item.link}">{$menu_item.title}</a></li>
{elseif $menu_item.type == 'submenu'}
<li class="menu">{$menu_item.title}</li>
<ul>
{foreach from=$menu_item.subitems item=submenu_item}
{if $submenu_item.type == 'link_internal_textpage' || $submenu_item.type == 'link_external'}
<li><a target="{$submenu_item.target}" href="{$submenu_item.link}">{$submenu_item.title}</a></li>
{/if}
{/foreach}
</ul>
{/if}
{/foreach}
</ul>
{/protected}