Hallo Community,
ich habe hier schon einiges mitgelesen und war oft als Gast hier unterwegs. Jetzt hab ich leider ein Problem mit einer Menuaufgabenstellung und komme selber nicht weiter. Ich habe viel ausprobiert und bin dennoch nicht auf das gewünschte Ergebnis gekommen. Ich hoffe das mir hier vielleicht jemand weiterhelfen kann bzw den richtigen Denkanstoß geben kann.
Ich möchte gerne ein Megamenu in mein aktuelles Projekt einbauen. Das Menu besteht aus drei Ebenen.
Ebene 1 = Hauptmenu ( Immer die erste Seite aus dem Seitenbaum in Typo3, deswegen entryLevel)
Klick auf Hauptmenubutton löst ein Div aus (submenucontainer) das via Javascript das Megamenu einblendet mit Ebene 2 und Ebene 3
Ebene 2 = Unterseiten der des Hauptmenu
Ebene 3 = Unterseiten der Unterseiten
Anbei mein Typoscript:
ERSTE = HMENU
ERSTE {
wrap = <ul id="erste">|</ul>
entryLevel = 0
special.value = 1
special = directory
1 = TMENU
1 {
NO = 1
NO {
wrapItemAndSub = <li>|</li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = title
doNotLinkIt = 0
}
IFSUB = 1
IFSUB <.NO
IFSUB {
doNotLinkIt = 1
}
ACT <.NO
ACT {
doNotLinkIt = 1
}
}
}
ZWEITE = HMENU
ZWEITE {
wrap = <div id="submenucontainer">|</div>
entryLevel = 1
special = directory
special.value >
1 = TMENU
1 {
noBlur = 1
wrap = <ul id="zweite">|</ul>
NO.wrapItemAndSub = <li>|</li>
NO.ATagTitle.field = abstract // description // title
#ACT.wrapItemAndSub = <li id="hauptmenu-active">|</li>
#ACT.ATagTitle.field = abstract // description //subtitle // title
}
}
DRITTE = HMENU
DRITTE {
special = directory
special.value >
entryLevel = 2
1 = TMENU
1 {
wrap = <ul id="dritte">|</ul>
NO.wrapItemAndSub = <li>|</li>
NO.ATagTitle.field = abstract // description // title
#ACT.wrapItemAndSub = <li id="hauptmenu-active">|</li>
#ACT.ATagTitle.field = abstract // description //subtitle // title
}
}
Javascript Snippet für das ClickEvent:
temp.jsmenu = TEXT
temp.jsmenu.value (
<script type="text/javascript">
$('ul#erste').click(function() {
var submenu = $('div#submenucontainer');
if (submenu.is(":visible")) {
submenu.fadeOut();
} else {
submenu.fadeIn();
}
});
var submenu_active = false;
$('div#submenucontainer').mouseenter(function() {
submenu_active = true;
});
$('div#submenucontainer').mouseleave(function() {
submenu_active = false;
setTimeout(function() { if (submenu_active === false) $('div#submenucontainer').fadeOut(); }, 400);
});
</script>
)
page.10.marks.JSMENU < temp.jsmenu
Meine Menuebenen aus dem Typoscript funktionieren Problemlos. Auch das Javascript funktioniert einwandfrei.
Mein Problem ist, wenn ich auf ein Hauptmenubutton klicke, wird das Click Event ausgelöst, das Div submenucontainer angezeigt, nur egal auf welchen Hauptmenubutton ich klicke, es werden immer die Unterseiten der aktuellen Seite wo ich mich befinde angezeigt und nicht die Unterseiten die zu dem Hauptmenubutton gehören.
Ich hoffe ich habe mich verständlich ausgedrückt, bei Rückfragen stehe ich gerne zur Verfügung. Vielen Dank im vorraus!
Grüße
grav