Typoscript Menu with different 2nd level depending on 1st level - typo3

Question

I am trying to build a menu with typoscript, in which the 2nd level differs depending on the 1st level menu items - this is what I've tried so far, but it doesn't work as wanted:
lib.mainnav = HMENU
lib.mainnav {
wrap = <ul id="nv-main">|<li class="responav"><i class="fas fa-bars"></i></li></ul>
1 = TMENU
1 {
expAll = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
NO.stdWrap.htmlSpecialChars = 1
CUR = 1
CUR.wrapItemAndSub = <li class="current">|</li>
CUR.stdWrap.htmlSpecialChars = 1
}
# von 1 (TMENU) kopieren
2 < .1
2 {
expAll = 1
wrap = <div class="nv-main-sub-bg"><div class="nv-main-sub-wrapper clearfix">|</div></div>
wrap.override = <div class="nv-main-sub-bg"><div class="nv-main-sub-wrapper indented clearfix">|</div></div>
wrap.override.if {
value = 6
equals.data = page:uid
}
stdWrap.cObject = COA
stdWrap.cObject {
20 = HMENU
20 {
special = directory
special.value.data = field:pid
1 = TMENU
1 {
wrap = <div class="nv-main-col-sub"><ul>|</ul></div>
NO = 1
NO.allWrap = <li>|</li>
NO.stdWrap.htmlSpecialChars = 1
NO.after.cObject = COA
NO.after.cObject {
wrap = <div class="nv-main-info-wrapper"><div class="nv-main-col-info">|</div></div>
# Text aus dem Feld subtitle oder title der Seiteneigenschaften auslesen
10 = TEXT
10 {
value.field = subtitle // title
stdWrap.wrap = <p>|</p>
}
# Bild aus Reiter Resourcen der Seiteneigenschaften auslesen (nur bei Page-UID 4)
20 = FILES
20 {
if.value.field = pid
if.equals = 4
references {
table = pages
# Seiten-ID
uid.dataWrap= {field:uid}
fieldName = media
}
renderObj = IMAGE
renderObj {
file.width = 290c
file.height = 200c
file.import.data = file:current:uid
file.crop.data = file:current:crop
file.treatIdAsReference = 1
altText.data = file:current:title
##params = class="img-responsive"
wrap = |
}
}
# Text aus dem Feld "abstract" auslesen (nur bei Page-UID 6)
30 = TEXT
30 {
if.equals.field = pid
if.value = 6
value.field = abstract
stdWrap.wrap = <p class="b-sub">|</p>
}
}
CUR < .NO
CUR.allWrap = <li class="current">|</li>
}
}
}
}
}
This will create a 2-level-menu, where the 2nd level is a combination of the menu items each with a text info and a picture which already works. What I want is a different 2nd-level menu depending on the selected 1st level item. For this I need to change the wrapping and replace the image by additional text.
Can you please give me a hint? Thank you very much for your help!
Michael
EDIT:
Typo3 V. 8.7.16
Page Tree:
Item 1
-- Subitem 1 **with text and picture**
-- Subitem 2 **with text and picture**
-- Subitem 3 **with text and picture**
-- ...
-- Subitem XX **with text and picture**
Item 2
-- Subitem 1 **with text and picture**
-- Subitem 2 **with text and picture**
-- Subitem 3 **with text and picture**
-- ...
-- Subitem XX **with text and picture**
Item 3
-- Subitem 1 **only with text** (headline and copytext)
-- Subitem 2 **only with text** (headline and copytext)
-- Subitem 3 **only with text** (headline and copytext)
-- ...
-- Subitem XX **only with text** (headline and copytext)
Item 4
-- Subitem 1 ...
-- ...
Item 5
-- Subitem 1 ...
-- ...
HTML-structure:
<ul id="nv-main">
<li>
Item 1
<div class="nv-main-sub-bg">
<div class="nv-main-sub-wrapper clearfix">
<div class="nv-main-col-sub">
<ul>
<li>
Subitem 1 ** with text and picture **
<div class="nv-main-info-wrapper">
<div class="nv-main-col-info">
<p>XXX</p> <!— from title/subtitle —>
<img src=„XXX“ border="0"> <!— from Resources —>
</div>
</div>
</li>
<li> … </li>
<li> … </li>
<li> … </li>
…
</ul>
</div>
</div>
</div>
</li>
<li> … </li>
<li>
Item 3
<div class="nv-main-sub-bg">
<div class="nv-main-sub-wrapper **indented** clearfix">
<div class="nv-main-col-sub">
<ul>
<li>
Subitem 1 ** only with text **
<div class="nv-main-info-wrapper">
<div class="nv-main-col-info">
<p class="b-head">XXX</p> <!— from title/subtitle —>
<p class="b-sub">XXX</p> <!— from abstract —>
</div>
</div>
</li>
<li> … </li>
<li> … </li>
<li> … </li>
…
</ul>
</div>
</div>
</div>
</li>
<li> … </li>
<li> … </li>
</ul>

Answer 1

One solution would be to render all information for the second level and decide by CSS which parts will be shown (depending on a matching class set on the first level by a property of the level one page)
The other way would be (as Joey mentioned): build your .after object depending on the pid of the current page. either you have a list of pages, which have the special rendering 'only with text' or (more complicated) you use the pid to access a property of the level one page which indicates this special rendering.
The easy solution with a list of page uids could be:
2.after.cObject = CASE
2.after.cObject {
key.field = pid
default = COA
default {
// rendering of **with text and picture**
}
// uid of level1 page
123 = COA
123 {
// rendering of **only with text**
}
// alternative level1 page with this rendering:
234 < .123
}
If your option **only with text** means the same as **with text and picture** just without the picture you can modify your existing code (which seems very complictaed using the HMENU with special=directory) to blank the the picture:
NO.after.cObject.20.if {
isInList.field = pid
// store pages uids in constant like: 1,2,34,50,87
value = {$specialPagesUidsList}
negate = 1
}

Answer 2

I recently had a similar problem.
Second and third level navigation had to be the depending to the chosen item of the first level.
Do you need to have the second leven nested into the active item?
<ul class="first-level">
<li>item 1</li>
<li>item 2
<ul class="second-level">
<li>item 3</li>
</li>
</ul>
or could you handle a structure like this?
<ul class="first-level">
<li>item 1</li>
<li>item 2</li>
</ul>
<ul class="second-level">
<li>item 3</li>
</ul>

Answer 3

Usually dealing with the "position" within a menu is a job for option split, but this would need a completely rewritten second level, since it had to be put to the "after" part of the first level items.
But since the behaviour of a submenu is actually determined by the parent page it belongs to and not just by the position this parent page has got within the first level of the menu, you should go for a specific PID value instead of the position.
You can use "if" or a "cObject" CASE for that purpose, so that the second level can be changed based on the pid value of its items.