Shop-Software CP::Shop - Eröffnen Sie Ihren eigenen Online-Shop!Shop-Software CP::Shop - Eröffnen Sie Ihren eigenen Online-Shop!

Spezialisten mit langjähriger Erfahrung

Schnelle Projektumsetzungen

sandoba.takeoff - Komplettpaket für Ihr Internetprojekt Kontakt mit sandoba.de aufnehmen

Hinweis zur Bestellung
Haben Sie Fragen zur Bestellung im Online-Shop? In den "Hilfen für die Bestellung" werden Ihre Fragen beantwortet. Auch der Support hilft Ihnen gerne weiter (Kontaktformular).


Kunststoffland NRW setzt auf Contentpapst

Aufklappbares Menü per Javascript

Aufbauend auf dem Tag {cp:container} (beschrieben in "Verschachtelte Artikel") lassen sich mittels Vorlagen und ein wenig Javascript aufklappbare Menüs für Artikel erzeugen. In dem unten beschriebenen Beispiel wird eine Liste mit Überschriften erzeugt. Sobald auf eine dieser Überschriften geklickt.wird, erscheint sofort der bereits vorgeladene Anreißer des Artikels. Optimal ist dieses Menü für stark gegliederte Texte und Listen, welche nicht auf verschiedene Artikel/Seiten aufgeteilt werden sollen.

Zur Erstellung des Menüs müssen Sie zuerst die mit Contentpapst mitgelieferte Javascript-Bibliothek einbinden. In einen Artikel bzw. die jeweilige Vorlage der Übersichtsseite schreiben Sie folgendes:

<script src="/{cp:configuration:main:directory}js_library.js" type="text/javascript" language="javascript"></script>

Auf die gleiche Seite kommt zudem der Aufruf von {cp:container{:

{cp:container module="article" start="0" limit="10" category="-" order="date" dir="desc" length="320" format="text" template="menu.htm"}

Dieser Tag nutzt die Vorlage "menu.htm" zum Aufbau des Menüs. In diese Datei (direkt im Hauptordner angeordnet) schreiben Sie folgendes:

<p><table border="0" cellspacing="4" width="90%" bgcolor="#9EBCC6">
<tr><td align="left">
<img src="a.gif" border="0" alt="" /> <u>{cp:article:header}</u><legend><small><a id="post{cp:article:number}" href="javascript:open_element({cp:article:number});">mehr...</a></small></legend>
</td></tr>
</table></p>

<p><div id="get{cp:article:number}" style="display: none">
<table border="0" cellspacing="4" width="90%" bgcolor="#DDEAF1">
<tr>
<td width="20"></td>
<td align="left">{cp:article:content} <small>({cp:article:date})</small></td>
</tr>
</table> </div></p>

Der Inhalt der Datei "menu.htm" ordnet jedem Artikel einen neuen Layer mit einem eindeutigen Bezeichner zu. Per Javascript wird die Sichtbarkeit der einzelnen Layer ein- oder ausgeschalten.

Bitte geben Sie eine Bewertung ab: nicht lesenswert  -2 -1 0 +1 +2  lesenswert


Weitere Artikel in der Knowledge Base:

Hier finden Sie die eBusiness-/eCommerce-Spezialisten von sandoba.de:
https://www.sandoba.de/support/knowledge-base/cms/aufklappbares-menue-per-javascript.html