Skip to content

Instantly share code, notes, and snippets.

@pgampe pgampe/menu.ts
Last active Jul 15, 2019

Embed
What would you like to do?
Fully cached menu with TypoScript
page.10 >
page.10 = COA
page.10 {
cache {
key = main-menu
}
10 = TEXT
10 {
data = date : U
strftime = %H:%M:%S
noTrimWrap = |Time: | |
}
20 = HMENU
20 {
special = directory
special.value = 2
wrap = <div class"menu">|</div>
1 = TMENU
1.expAll = 1
1.wrap = <ul>|</ul>
1 {
NO = 1
NO.wrapItemAndSub = <li>|</li>
}
2 < .1
3 < .1
4 < .1
}
}
# replaces the A tag of the active menu item
page.stdWrap.replacement.10 {
search.cObject = HMENU
search.cObject {
special = list
special.value.field = uid
# take care to copy any additional params to the A tag
1 = TMENU
1 {
NO = 1
}
}
replace.cObject = HMENU
replace.cObject {
special = list
special.value.field = uid
# take care to copy any additional params to the A tag
1 = TMENU
1 {
NO = 1
NO.ATagParams = class="active"
}
}
}
/*
debug here
page.20 >
page.20 < page.stdWrap.replacement.10.search.cObject
page.30 >
page.30 < page.stdWrap.replacement.10.replace.cObject
*/
@pi-phi

This comment has been minimized.

Copy link

commented Jun 6, 2018

wäre es nicht einfacher die highlighting Klassen 'current' und 'active' per Javascript im Browser setzen zu lassen?
jeder Menüeintrag benötigt dafür natürlich eine eindeutige ID (zb. '#m').
auf jeder Seite wird ein Javascript Funktionsaufruf mit der aktuellen page uid als Parameter generiert.

die dazugehörige javascript-Funktion sucht den Menüeintrag, setzt die 'current' Klasse und hangelt sich im Menü-DOM nach oben um jeweils die 'active' Klasse zu setzen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.