How can I apply a different wrap to every menu item? - typo3

Question

I was trying to create a custom menu in TypoScript and my idea is to have a div for each menu item.
Example
lib.mainMenu = HMENU
lib.mainMenu {
entryLevel = 0
1 = TMENU
1 {
NO.allWrap = <div id="forsideknap">|</div> |*| <div id="butikker">|</div> |*| <div id="nyheder">|</div> |*| <div id="arrangementer">|</div> |*| <div id="avis">|</div>
}
}
I have created 5 pages, and only 3 of them are getting their div. There are 3 identical. How can I fix this problem?

Answer 1

You are using the optionSplit concept, which itself has many different options. It might cause confusion when used for the first time. You unintentionally defined the first, the middle and the last part of your wrap by using the |*| separators:
first element |*| middle element(s) |*| last element
If there is more then one middle element, they all get the middle parameter ("butikker"). And everything from the third |*| on is ignored.
What you wanted is a simple sequence of different wraps. This is achieved by using the || separator:
1st element || 2nd element || 3rd element || 4th element || 5th element || etc.
In your case:
NO.allWrap = <div id="forsideknap">|</div> || <div id="butikker">|</div> || <div id="nyheder">|</div> || <div id="arrangementer">|</div> || <div id="avis">|</div>
Note that you can combine the separators if you have more complicated structures.
Read more:
on the TYPO3 wiki page about optionSplit
on TYPO3 Docs
German tutorial on optionSplit in an HMENU / TMENU