モバイルナビゲーションでは、次の単純なTypoScriptでアコーディオンメニューを使用します。
lib.testMenu = HMENU
lib.testMenu {
entryLevel = 0
wrap = <div id="mobile_menu">|</div>
1 = TMENU
1 {
expAll = 1
IFSUB = 1
IFSUB {
wrapItemAndSub = <li class="has-sub">|</li>
}
wrap = <ul>|</ul>
NO.wrapItemAndSub = <li>|</li>
}
2 < .1
3 < .1
3 {
IFSUB {
wrapItemAndSub = <li class="has-sub">|</li>
}
}
4 < .3
}
最初の2つのレベルは通常、見出しだけを持っています。 "has-sub"クラスでは、jqueryを使用して次のレベルを開くことができます。第3および第4レベルには内容があります。したがって、それぞれのレベルのWebページへのリンクとその下のレベルを開くためのリンクの両方を含むメニュー行が必要です。 これは次のようになります。
"現在のリンク層|"矢印 "(下のレイヤーを開くリンク)をクリックします。
<li>link-of-the-current-level</li>
<li class="has-sub">" Arrow" (link to open the layer below)" ><ul><li> (...)</li><> (...)</li></ul></li>
下位レベルがない場合は、
<li class="has-sub"> (...)</li>.
多くの試みにもかかわらず、私は残念なことに解決策に近づくことができませんでした。したがって、私はどんなヒントにも満足しています。
回答:
回答№1は1私が正しく理解していれば、最終的な結果は次のようになります:
<li>
<a href="">Title of the page</a>
</li>
<li class="has-sub">
"Arrow"
<ul>
<li> (...)</li>
<li> (...)</li>
</ul>
</li>
私は正しい?
私はそうすべきだと思う:
lib.mainmenu = HMENU
lib.mainmenu {
entryLevel = 0
wrap = <div id="mobile_menu">|</div>
1 = TMENU
1 {
wrap = <ul>|</ul>
expAll = 1
NO.wrapItemAndSub = <li class="first">|</li>
IFSUB = 1
IFSUB {
wrapItemAndSub = <li class="first has-sub">|</li>
}
}
2 < .1
2.NO.wrapItemAndSub = <li class="second">|</li>
2.IFSUB.wrapItemAndSub = <li class="second has-sub">|</li>
3 < .1
3.NO.wrapItemAndSub = <li class="third">|</li>
3 {
IFSUB {
wrapItemAndSub = <li class="third hasarrow">|</li>
allWrap = |</li><li class="third has-sub">"Arrow"
}
}
4 < .3
4.NO.wrapItemAndSub = <li class="fourth">|</li>
4.IFSUB.wrapItemAndSub = <li class="fourth hassub">|</li>
4.IFSUB.allWrap = |
}
たぶんクリーンな解決策ではない:)私はいくつかのTypoScriptのエキスパートがもっとうまくいくだろうと思う。
私は、どのレベルを印刷しているかをよりよく理解するために、いくつかのクラスを追加しました。私が正しく理解していれば、これがあなたのために働くかどうかを教えてください。