Shop-Software CP::Shop - Eröffnen Sie Ihren eigenen Online-Shop!Shop-Software CP::Shop - Eröffnen Sie Ihren eigenen Online-Shop!
Informationen zur Shop-Software CP::Shop Pressemeldung zur Veröffentlichung von CP::Shop 2016.1

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).


Contentpapst- und CP::Shop-Referenzen

Horizontale Menüstrukturen per {cp:container}

Ein weiteres Beispiel für die Möglichkeiten, welche sich durch den Einsatz von {cp:container} ergeben, soll hier durch eine horizontale Menüstruktur visualisiert werden (siehe Screenshot rechts).

Neben einer Auflistung der Hauptkategorien, sollen auch die jeweils passenden Unterkategorien eingeblendet werden. Um dies zu realisieren, müssen für das Menü Javascript und Layer eingesetzt werden.

Integrieren Sie zuerst folgendes Script in die gewünschte Vorlage. Das Script sorgt für den Aufruf der einzelnen Menü-Elemente (Haupt- und Unterkategorien) mit den Vorlagen "menu_horizontal.htm" und "menu_sub.htm":

Beliebige Vorlage:

<table border="1" bgcolor="#BF3A37" cellspacing="0" cellpadding="4" width="470"><tr><td align="left"></td></tr></table>

<table border="0" bgcolor="#FAF6F6" cellspacing="0" cellpadding="4" width="470"><tr><td align="left">
{cp:container module="navigation" category="0" template="menu_horizontal.htm"}
</td></tr></table>

<table border="1" bgcolor="#BF3A37" cellspacing="0" cellpadding="4" width="470"><tr><td align="left"></td></tr></table>

<table border="0" cellspacing="0" cellpadding="4" width="470"><tr><td align="left">
<div id="describe" style="heigth:40px" onmouseover="clear_delayhide()" onmouseout="resetit(event)"></div>
</td></tr></table>

<script language="JavaScript1.2">

var submenu=new Array();

{cp:container module="navigation" category="0" template="menu_sub.htm"}

var delay_hide = 400;

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : "";

function showit(which) {
clear_delayhide()
thecontent=(which==-1)? "" : submenu[which];

if (document.getElementById||document.all) {
menuobj.innerHTML=thecontent
} else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}

function resetit(e) {
if (document.all&&!menuobj.contains(e.toElement)) {
delayhide=setTimeout("showit(-1)",delay_hide)
} else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) {
delayhide=setTimeout("showit(-1)",delay_hide);
}
}

function clear_delayhide() {
if (window.delayhide) {
clearTimeout(delayhide);
}
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
</script>

Das Hauptmenü wird als einfache Liste zusammengestellt. Jeder der Einträge ruft per "onmouseover" die Javascript-Funktionen des Menüs auf.

menu_horizontal.htm:

<b><a href="{cp:navigation:nav_url}" onmouseover="showit({cp:navigation:nav_id})">{cp:navigation:nav_title}</a></b> |

Das Javascript-Menü benötigt die Unterkategorien aufbereitet in Form eines Arrays. Die Vorlage "menu_sub.htm" stellt den Rahmen des Arrays zusammen und "menu_sub_structure.htm" formatiert jeden Eintrag einer Unterkategorie wie dies vom Menü benötigt wird:

menu_sub.htm:

submenu[{cp:navigation:nav_id}]='{cp:container module="navigation" category="{cp:navigation:nav_id}" template="themes/standard/menu_sub_structure.htm"}'

menu_sub_structure.htm:

<a href="{cp:navigation:nav_url}">{cp:navigation:nav_title}</a>

Achten Sie bei allen Einträgen (vor allem innerhalb des Arrays) darauf, dass die Einträge keinen Zeilenumbruch enthalten, da es sonst zu Javascript-Fehlern kommen kann.

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/horizontale-menuestrukturen-per-cpcontainer.html