1

5 つの項目を持つメインメニューがあり、そのうちの 3 つには 1 つ以上のサブメニュー ページがあります。

サブメニューを最初のレベルのメニューの 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でラッピング要素を開き、2番目のレベルで閉じます。

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 に答える