Hallo,
ich möchte auf meine Seite eine Menus Liste einbinden mit JQUery collapser.
Die Untermenu sollen erst angezeigt werden, wenn das entwsprechende Hauptmenu angeklickt ist, etwa wie im demo6 hier http://www.aakashweb.com/resources/pages/demos/jquery-collapser/.
Meine Menus und Untermenu sind jetzt gleichzeitig angezeigt.
WEiß jemand wie ein JQUery function eingebunden wird?
Danke im Voraus
Na auf der Seite findest du doch eigentlich alles was du brauchst.
Das Javascript:
$(document).ready(function(){
$('.panel').hide();
$('.demo6').collapser({
target: 'next',
effect: 'slide',
changeText: 0,
expandClass: 'expIco',
collapseClass: 'collIco'
}, function(){
$('.panel').slideUp();
});
});
Nicht vergessen auch jQuery einzubinden
also: jquery.js und jquery.collapser.js und alles vielleicht über headerData einbinden.
und dann das Memü mit der Syntax bauen:
<h4 class="demo6">Heading 1</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<h4 class="demo6">Heading 2</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<h4 class="demo6">Heading 3</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<h4 class="demo6">Heading 4</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
Hallo trainerth,
danke für deine Antwort.
ich habe das demo mit einfache javascript, Html und Css Dateien getestet, und es funktionniert.
So bald ich das selbe in TypoScript umsetze, funktionniert das nicht.
Was ich eigentlich erstellen will ist ein ein- und ausklappbar Menu in Typoscript.
So was wie:
Menu1(active)
Menu11
Menu12
Menu2
Menu3
Menu4
Wo, jedes Menu unterseiten hat, ich will nur das Menu ausklappen, was active ist, ohne auf eine neue Seite zu laden.
Zur Zeit werden alle Haupt und Untermenus ausgeklappt, aber wie schließe ich die Menus, die nicht Aktiv sind?
Hier ist mein TypoScript
lib.menu = COA
lib.menu{
10 = TEXT
10{
insertData =1
data = page:title
wrap = <h2>|</h2>
}
20 = HMENU
20{
entryLevel =1
special = directory
special.field = pid
wrap=<ul>|</ul>
1= TMENU
1{
expAll = 1
noBlur = 1
NO=1
NO.wrapItemAndSub =<li><a href="#">|</a></li>
NO.doNotLinkIt=1
CUR< .NO
CUR.linkWrap=<li><a class="active">|</a></li>
CUR.doNotLinkIt=1
ACT< .NO
ACT.ATagParams=class="active"
}
2= TMENU
2{
NO = 1
NO.wrapItemAndSub =<li>|</li>
NO.ATagParams=class="sub"
CUR< .NO
CUR=1
CUR.linkWrap=<li><a class="sub">|</a></li>
CUR.doNotLinkIt=1
ACT< .NO
ACT=1
ACT.ATagParams=class="sub"
}
}
}
Naja kann ja auch nicht klappen.
Du baust die geforderte Struktur nicht nach mit deinem TS.
Außerdem ist das menü so nicht richtig.
der Anfang:
lib.menu = COA
lib.menu{
10 = TEXT
10 {
insertData =1
data = page:title
wrap = <h4 class="demo6">|</h4>
}
20 = HMENU
20 {
#entryLevel =1 <- Brauchst du nicht, da special = directory
special = directory
#special.field = pid <- special.value = hier deine PID also z.B. die der Root seite (1)
special.value = 1
wrap=<ul>|</ul>
1= TMENU
1 {
#expAll = 1 <- Finde ich ist selbsterklärend, willst du alle ausklappen...
expAll = 0
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li class="panel">|</li>
NO.doNotLinkIt = 1
CUR < .NO
CUR = 1
#CUR.linkWrap=<li><a class="active">|</a></li> <- Was soll sowas?
#Du über nimmst das wrap aus dem NO und ein a brauch da sowieso nicht drum!
CUR.ATagParams = class="active"
CUR.doNotLinkIt = 1
ACT < .NO
ACT = 1
ACT.ATagParams = class="active" # <-Hier ist es sogar richtig....
}
2 = TMENU
2 {
NO = 1
NO.wrapItemAndSub = <li>|</li>
NO.ATagParams = class = "sub"
CUR< .NO
CUR=1
CUR.linkWrap = <li>|</li>
CUR.doNotLinkIt=1
ACT < .NO
ACT = 1
ACT.ATagParams = class = "sub"
}
}
}
Desweiteren nicht vergessen wie erwähnt die Dateien zu laden und den aufruf der funktionen.
Hallo trainerth,
vielen dank für dein Beitrag, ich habe das Problem gelöst.
Ich brauchte 3 ebene, mit 1=2 , und der dritte wie ich das menu 2 hatte.
Und es hat geklappt!
Danke