Question

我有一个包含5个项目的主菜单，其中3个包含一个或多个子菜单页面。

我能够将子菜单渲染到第一级菜单的li标签中。

如果有帮助，我正在使用EXT：fed：

<fed:page.menu pageUid="2" levels="2" expandAll="1" substElementUid="1" />

这会呈现以下标记：

<ul>
    <li id="elem_10">
        <a href="10">10</a>
    </li>
    <li class="active sub" id="elem_21">
        <a class="active sub" href="21">21</a>
        <ul class="lvl-1">
            <li class="current" id="elem_11">
                <a class="current" href="11">11</a>
            </li>
            <li id="elem_12">
                <a href="12">12</a>
            </li>
            <li id="elem_13">
                <a href="13">13</a>
            </li>
            <li id="elem_14">
                <a href="14">14</a>
            </li>
        </ul>
    </li>
    <li id="elem_15">
        <a href="15">15</a>
    </li>
    <li class="sub" id="elem_22">
        <a class="sub" href="22">22</a>
        <ul class="lvl-1">
            <li id="elem_16">
                <a href="16">16</a>
            </li>
            <li id="elem_17">
                <a href="17">17</a>
            </li>
            <li id="elem_18">
                <a href="18">18</a>
            </li>
        </ul>
    </li>
    <li class="sub" id="elem_19">
        <a class="sub" href="19">19</a>
        <ul class="lvl-1">
            <li id="elem_20">
                <a href="20">20</a>
            </li>
        </ul>
    </li>
</ul>

但是我无法按照希望来设计这种风格，尤其不是因为它必须具有响应性。

我想要的是这样的：

<div class="submenu">
    <ul id="parent-21">
        <li id=current" id="elem_11">
            <a id=current" href="11">11</a>
        </li>
        <li id="elem_12">
            <a href="12">12</a>
        </li>
        <li id="elem_13">
            <a href="13">13</a>
        </li>
        <li id="elem_14">
            <a href="14">14</a>
        </li>
    </ul>
    <ul id="parent-22">
        <li id="elem_16">
            <a href="16">16</a>
        </li>
        <li id="elem_17">
            <a href="17">17</a>
        </li>
        <li id="elem_18">
            <a href="18">18</a>
        </li>
    </ul>
    <ul id="parent-19">
        <li id="elem_20">
            <a href="20">20</a>
        </li>
    </ul>
</div>

我还需要父（菜单）和子（菜单）之间的连接......但这不是最重要的任务，我可以用jQuery来计算。

Answer 1

一旦完成，它看起来很容易。神奇的是在第一级中执行“doNotShowLink = 1”，但是当存在子菜单时打开包含所需elementUid的包装元素 - 并在第二级关闭它。

10 = HMENU
10 {
    special = directory
    special.value = 2

    1 = TMENU
    1 {
        expAll = 1
        NO {
            doNotShowLink = 1
        }

        CUR < NO
        ACT < NO
        ACTIFSUB < NO
        CURIFSUB < NO

        IFSUB = 1
        IFSUB {
            doNotShowLink = 1
            subst_elementUid = 1
            allWrap = <div class="menu" id="parent-{elementUid}"><ul>|
        }
    }

    2 = TMENU
    2 {
        noBlur = 1

        NO = 1
        NO {
            wrapItemAndSub = <li>|</li>
            ATagTitle.field = subtitle // title
        } 

        CUR < .NO
        CUR.wrapItemAndSub = <li class="active">|</li>

        ACT < .CUR

        ACTIFSUB < .NO
        ACTIFSUB.wrapItemAndSub = <li class="open">|</li>

        CURIFSUB < .ACTIFSUB

        SPC < .NO

        wrap = |</ul></div>
    }
    3 >
    wrap = <div id="submenu">|</div>
}

如何渲染所有子菜单？

1 个答案: