Question

我正在尝试构建一个带有排字的菜单，其中第二级取决于第一级菜单项-这是我到目前为止已经尝试过的方法，但是无法按需工作：

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>

                }

            }

        }

    }

}

这将创建一个2级菜单，其中2级是菜单项的组合，每个菜单项均具有文本信息和图片已经有效。我想要的是一个不同的第二级菜单，具体取决于所选的第一级项目。为此，我需要更改包装并用其他文字替换图片。

能给我一个提示吗？非常感谢您的帮助！

迈克尔

编辑： Typo3 V.8.7.16

页面树：

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结构：

<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

我最近有一个类似的问题。

第二级和第三级导航必须取决于第一级所选项目。

您是否需要将第二个leven嵌套到活动项目中？

<ul class="first-level">  
    <li>item 1</li>
    <li>item 2
        <ul class="second-level">  
            <li>item 3</li>
    </li>
</ul>

还是可以处理这样的结构？

<ul class="first-level">  
    <li>item 1</li>
    <li>item 2</li>
</ul>
<ul class="second-level">  
    <li>item 3</li>
</ul>

Answer 2

通常，处理菜单中的“位置”是选项拆分的工作，但这需要完全重写的第二级，因为必须将其置于第一级项目的“之后”部分。

但是，由于子菜单的行为实际上是由其所属的父页面决定的，而不是仅由该父页面在菜单的第一级中所处的位置决定的，因此应选择一个特定的PID值，而不是位置。

您可以为此目的使用“ if”或“ cObject” CASE，以便可以根据其项目的pid值来更改第二级。

Answer 3

一种解决方案是呈现第二级的所有信息，并由CSS决定显示哪些部分（取决于第一级设置的相匹配的类，该级别由一页的属性决定）

另一种方法是（如Joey所述）：根据当前页面的.after构建pid对象。或者您有一个页面列表，这些页面具有“仅带文本”的特殊渲染，或者（更复杂），您可以使用pid访问指示该特殊渲染的一级页面的属性。

包含页面uid的列表的简单解决方案可能是：

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
}

如果您的选项**only with text**与**with text and picture**的含义相同，只是没有图片，则可以修改现有代码（使用HMENU和special=directory看起来很复杂）空白图片：

NO.after.cObject.20.if {
    isInList.field = pid
    // store pages uids in constant like: 1,2,34,50,87
    value = {$specialPagesUidsList}  
    negate = 1
}

取决于第一级的第二级打字菜单

3 个答案: