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

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>
        <a href="">Item 1</a>

        <div class="nv-main-sub-bg">

            <div class="nv-main-sub-wrapper clearfix">

                <div class="nv-main-col-sub">

                    <ul>
                        <li>
                            <a href="">Subitem 1 ** with text and picture **</a>

                            <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>
        <a href="">Item 3</a>

        <div class="nv-main-sub-bg">

            <div class="nv-main-sub-wrapper **indented** clearfix">

                <div class="nv-main-col-sub">
                    <ul>
                        <li>
                            <a href="">Subitem 1 ** only with text **</a>

                            <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

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.

Answer 3

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>