Produktmenü-Beispiel 2
Vertikales, frei positioniertes Produktmenü
In diesem Beispiel wird ein vertikales Hauptmenü mit horizontalem Flyout für die zweite Ebene erzeugt. Die Navigationspunkte im Flyout-Menü haben eigene Style-Klassen - unabhängig vom vertikalen Hauptmenü, in dem sie zusätzlich dargestellt werden. Mit einer weiteren separaten Klasse und "float: right" können Bilder inkl. Verlinkungen zu Produkten angezeigt werden, die in den aktuell aufgelisteten Unterkategorien enthalten sind. Im Effekt wird der Flyout-Bereich wie ein Rastermenü dargestellt. Das Flyout-Menü wird per Mouseover eingeblendet.
Der folgende Quellcode enthält alle Elemente, die für die Integration des gezeigten Menüs erforderlich sind. Fügen Sie ihn an der gewünschten Position in Ihre Templates ein.
<h2>Vertikales Sidebar-Produktmenü mit horizontalem Flyout</h2>
<!-- WS-LoadProductMenu lädt die gewünschten Ebenen des Menüs vor -->
~WS-LoadProductMenu(sidebar_navi,1,2,show,no,0)~
<div class="ws_menu">
<ul class="level1">
<!-- Zähler DC-Counter1 zurücksetzen. (Der DC-Counter1 wird zum Durchzählen der Navigationspunkte verwendet) -->
~DC-Counter1_reset~
<!-- Schleife für die erste Ebene (Hauptnavigationspunkte) -->
{@PM-DataLevel1}
<!-- DC-Counter, der die vorhandenen Navigationspunkte der ersten Ebene durchzählt -->
~DC-Counter1_inc~
<!-- Freien Parameter DC-FP1 zurücksetzen. (Der Parameter wird für die Speicherung des Kategorieindex verwendet) -->
~DC-FP1_reset~
<!-- Kategorieindex für die Hauptnavigationspunkte setzen, um die Produkte der Hauptnavigationspunkte anzeigen zu lassen -->
{!DC-FP1}~DC-FP1_set($PM-Index$)~{/!DC-FP1}
<li>
<!-- DIV-Container mit Ausgabe des Zählerwertes von DC-Counter1, um jedem Navigationspunkt eine individuelle Klasse zu geben -->
<!-- Durch die individuelle ID wird das korrekte Einblenden der Unterpunkte realisiert -->
<div onMouseOver="$('#ws_topnav_flyout_~DC-Counter1~').show();" onMouseOut="$('#ws_topnav_flyout_~DC-Counter1~').hide();" class="ws_flyout">
<!-- Anzeigen der Hauptnavigationspunkte -->
<a href="~PM-Link~" title="~PM-Name~" class="level1_link {PM-IsSelected}selected{/PM-IsSelected}{PM-IsOpened}opened{/PM-IsOpened}">
~PM-Name~
</a>
<!-- Bereich für die Abfrage, ob eine Ebene 2 (Untermenüpunkte) vorhanden ist -->
{PM-DataLevel2}
<div id="ws_topnav_flyout_~DC-Counter1~" class="ws_topnav_flyout" style="display:none;"> <!-- Flyout-->
<ul class="level2_flyout">
<!-- Schleife für die 2. Ebene -->
{@PM-DataLevel2}
<li>
<!-- Anzeigen der Navigationspunkte auf Ebene 2 -->
<a href="~PM-Link~" title="~PM-Name~" class="{PM-IsSelected}selected{/PM-IsSelected}{PM-IsOpened}opened{/PM-IsOpened}">
~PM-Name~
</a>
</li>
{/@PM-DataLevel2}
</ul>
<!-- Anzeigen der Produkte, die den Hauptnavigationspunkten (Ebene 1) zugewiesen sein müssen -->
{DC-FP1}
<!-- DC-FP1 gibt den Index des Hauptnavigationspunktes (auf Ebene 1) aus -->
{Cat-AdvData($DC-FP1$,3)}
<div class="ws_topnav_flyout_offer">
<h3>Unsere Bestseller</h3>
<!-- Schleife für die Darstellung der enthaltenen Produkte -->
{@PR-Data}
<a href="~PR-Link~" class="ws_topnav_flyout_offer_images" title="~PR-Name~" alt="~PR-Name~">
<img src="~PR-Thumbnail~" alt="~PR-Name~" title="~PR-Name~">
</a>
{/@PR-Data}
<div class="clear"></div>
</div> <!-- ws_topnav_flyout_offer -->
{/Cat-AdvData($DC-FP1$,3)}
{/DC-FP1}
<div class="clear"></div>
</div> <!-- ws_topnav_flyout_DC-Counter1 -->
{/PM-DataLevel2}
<!-- Realisiert die Darstellung der Unterpunkte, wenn diese im Flyout-Menü geklickt worden sind -->
<!-- Bereich für die Abfrage, ob eine Ebene 2 (Untermenüpunkte) vorhanden ist-->
{PM-DataLevel2}
<!-- Freien Design-Parameter DC-FP2 zurücksetzen. Der Parameter wid für die Speicherung des Untermenüpunkt-Zustands verwendet -->
~DC-FP2_reset~
<!-- Ist der Zustand eines Untermenüpunktes (auf Ebene 2) "geöffnet", wird DC-FP2 auf den Wert "show" gesetzt -->
{PM-IsOpened}~DC-FP2_set(show)~{/PM-IsOpened}
<!-- Ist der Zustand eines Untermenüpunktes (auf Ebene 2) "ausgewählt", wird DC-FP2 auf den Wert "show" gesetzt -->
{PM-IsSelected}~DC-FP2_set(show)~{/PM-IsSelected}
<!-- Die offene Anzeige von Ebene 2 erfolgt nur, wenn ein Untermenüpunkt "geöffnet" oder "ausgewählt" wurde -->
<!-- Nur in diesen beiden Zuständen greift der DC-FP2 mit dem Wert "show" -->
{DC-FP2(show)}
<ul class="level2">
<!-- Schleife für Ebene 2 -->
{@PM-DataLevel2}
<li>
<!-- Anzeigen der Navigationspunkte auf Ebene 2 -->
<a href="~PM-Link~" title="~PM-Name~" class="{PM-IsOpened}opened{/PM-IsOpened}{PM-IsSelected}selected{/PM-IsSelected}">~PM-Name~</a>
<!-- Ebene 2 (Status "opened") -->
<!-- Bereich für die Abfrage, ob eine Ebene 3 (Untermenüpunkte) vorhanden ist-->
{PM-DataLevel3}
<!-- Freien Design-Parameter DC-FP3 zurücksetzen. Der Parameter wid für die Speicherung des Untermenüpunkt-Zustands verwendet -->
~DC-FP3_reset~
<!-- Ist der Zustand eines Untermenüpunktes (auf Ebene 3) "geöffnet", wird DC-FP3 auf den Wert "show" gesetzt -->
{PM-IsOpened}~DC-FP3_set(show)~{/PM-IsOpened}
<!-- Ist der Zustand eines Untermenüpunktes (auf Ebene 3) "ausgewählt", wird DC-FP3 auf den Wert "show" gesetzt -->
{PM-IsSelected}~DC-FP3_set(show)~{/PM-IsSelected}
<!-- Die offene Anzeige von Ebene 3 erfolgt nur, wenn ein Untermenüpunkt auf Ebene 3 "geöffnet" oder "ausgewählt" wurde -->
<!-- Nur in diesen beiden Zuständen greift der DC-FP3 mit dem Wert "show" -->
{DC-FP3(show)}
<ul class="level3">
<!-- Schleife für Ebene 3 -->
{@PM-DataLevel3}
<!-- Anzeigen der Navigationspunkte auf Ebene 3 -->
<li><a href="~PM-Link~" title="~PM-Name~" class="{PM-IsOpened}opened{/PM-IsOpened}{PM-IsSelected}selected{/PM-IsSelected}">~PM-Name~</a></li>
<!-- Ebene 3(Status "opened") -->
{/@PM-DataLevel3}
</ul>
{/DC-FP3(show)}
{/PM-DataLevel3}
</li>
{/@PM-DataLevel2}
</ul>
{/DC-FP2(show)}
{/PM-DataLevel2}
</div> <!-- ws_menu_level1 -->
</li>
{/@PM-DataLevel1}
</ul>
</div> <!-- #ws_menu-->
Die im Beispiel verwendeten Style-Klassen können Sie "out of the box" verwenden. Fügen Sie dazu den folgenden Quellcode in Ihre CSS-Datei ein:
/*######################################################*/
/* Definitionen für den DIV-Container des Sidebar-Menüs */
/*######################################################*/
.ws_menu {
width: 200px;
}
/*##############################################################*/
/* Definitionen für die Darstellung von Ebene 1 im Sidebar-Menü */
/*##############################################################*/
.level1 {
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px;
border-bottom: 1px solid #ddd;
}
.level1 li {
position: relative;
}
.level1 a,
.level1 a:link,
.level1 a:visited,
.level1 a:active,
.level1 a.opened,
.level1 a.selected {
display: block;
color: #003366;
font-size: 12px;
border-top: 1px solid #ddd;
padding: 5px 0px 6px 23px;
text-decoration: none;
font-weight: normal;
margin: 0px 0px 0px 0px;
}
.level1 a.opened,
.level1 a.selected {
color: #00adef;
}
.level1 a:hover,
.level1 .ws_flyout:hover a.level1_link {
background: #666666;
color: #00adef;
margin: 0px 0px 0px 0px;
}
/*##############################################################*/
/* Definitionen für die Darstellung von Ebene 2 im Sidebar-Menü */
/*##############################################################*/
.level2 {
border-top: 1px solid #ddd;
}
.level2 a,
.level2 a:link,
.level2 a:visited,
.level2 a:active,
.level2 a.opened,
.level2 a.selected {
display: block;
color: #003366;
font-size: 12px;
border-top: 0px solid #ddd;
padding: 5px 0px 6px 33px;
text-decoration: none;
font-weight: normal;
margin: 0px 0px 0px 0px;
}
/*##################################################################*/
/* Definitionen für die Darstellung von Ebene 2 im Flyout-Container */
/*##################################################################*/
.level2_flyout {
list-style-type: none;
padding: 3px 0px 0px 0px;
margin: 0px 0px 0px 20px;
width: 225px;
float: left;
border-bottom: 1px solid #ddd;
}
.level2_flyout a,
.level2_flyout a:link,
.level2_flyout a:visited,
.level2_flyout a:active,
.level2_flyout a:hover,
.level2_flyout a.selected {
display: block;
padding: 5px 0px 6px 25px;
text-decoration: none;
font-size: 12px;
color: #fff;
}
/*##############################################################*/
/* Definitionen für die Darstellung von Ebene 3 im Sidebar-Menü */
/*##############################################################*/
.level3 {
border-top: 1px solid #ddd;
}
.level3 a,
.level3 a:link,
.level3 a:visited,
.level3 a:active,
.level3 a.opened,
.level3 a.selected {
color: #003366;
font-size: 12px;
border-top: 0px solid #ddd;
padding: 5px 0px 6px 43px;
text-decoration: none;
font-weight: normal;
margin: 0px 0px 0px 0px;
}
/*###################################*/
/* Definitionen für den Flyout-Container */
/*#######################################*/
.ws_sidebarnav_flyout {
position: absolute;
top: 1px;
left: 190px;
width: 740px;
padding: 10px 0px 10px 0px;
z-index: 999;
background: #666666;
}
/*####################################################################################*/
/* Definitionen für die Grafiken mit Verlinkungen (Produktdarstellung) im Flyout-Menü */
/*####################################################################################*/
.ws_sidebarnav_flyout_offer {
float: right;
margin: 0px 28px 0px 0px;
width: 387px;
}
.ws_sidebarnav_flyout_offer h3 {
color: #fff;
font-size: 12px;
font-weight: normal;
margin: 0px 0px 6px 9px;
}
a.ws_sidebarnav_flyout_offer_images,
a.ws_sidebarnav_flyout_offer_images:link,
a.ws_sidebarnav_flyout_offer_images:visited,
a.ws_sidebarnav_flyout_offer_images:active,
a.ws_sidebarnav_flyout_offer_images:hover {
float: left;
margin: 0px 0px 0px 10px;
background: #fff;
padding: 0px 0px 0px 0px;
}
Hinweis: |
|
|
Für die MouseOver-Funktion wird die WEBSALE JavaScript-Bibliothek, Version 1.8.1, benötigt. Sie muss im Head-Abschnitt jedes Templates eingebunden werden, das dieses Produktmenü enthält. |
