1

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

我能够将子菜单呈现到一级菜单的 li-tags 中。

如果有帮助，我正在使用 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。

4

1 回答 1

2

完成后，它看起来很容易。魔术是在第一级执行“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>
}
于 2013-02-08T08:41:03.253 回答