0
Typo3にノードがあり、その中に4列のメニューとして表示したいページがたくさんあります。列の並べ替えは、左から右にしてラップアラウンドする必要があります。このようTypo3のメニューを複数の列に分割するにはどうすればいいですか?
:
Col1 Col2 Col3 Col4
A B C D
E F G
Typo3にノードがあり、その中に4列のメニューとして表示したいページがたくさんあります。列の並べ替えは、左から右にしてラップアラウンドする必要があります。このようTypo3のメニューを複数の列に分割するにはどうすればいいですか?
:
Col1 Col2 Col3 Col4
A B C D
E F G
私の解決策では(TYPO3のLTS 6.2で行われましたが、同様に、現在のすべてのバージョンで動作するはずです)、私は列を達成するために、このアプローチを使用していました。フォーマットが念頭に置いて、ブートストラップで行われていることに注意してください:
# Menu with 4 columns
lib.columnMenu = COA
lib.columnMenu {
10.wrap = <div class="col-sm-3"><ul> | </ul></div>
10 = HMENU
10.special = directory
10.special.value = INSERT YOUR PAGE ID HERE
10.1 = TMENU
10.1.NO{
allWrap=<li>|</li>
stdWrap.if.isFalse.prioriCalc=1
stdWrap.if.isFalse.cObject=TEXT
stdWrap.if.isFalse.cObject.insertData=1
stdWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ}+3)%4
allWrap.if.isFalse.cObject=TEXT
allWrap.if.isFalse.prioriCalc=1
allWrap.if.isFalse.cObject.insertData=1
allWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ}+3)%4
}
20 < .10
20.wrap = <div class="col-sm-3"><ul> | </ul></div>
20.1.NO{
allWrap = <li>|</li>
stdWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ}+2)%4
allWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ}+2)%4
}
30 < .10
30.wrap = <div class="col-sm-3"><ul> | </ul></div>
30.1.NO{
allWrap = <li>|</li>
stdWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ}+1)%4
allWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ}+1)%4
}
40 < .10
40.wrap = <div class="col-sm-3"><ul> | </ul></div>
40.1.NO{
allWrap = <li>|</li>
stdWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ})%4
allWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ})%4
}
}
}
# End Menu
その後、あなたは、このような部分的ないくつかの流体テンプレートのメニューだけ含まれます:これはないCMSで、CSSで行う必要があり
<div class="row mb-20">
<f:cObject typoscriptObjectPath="lib.columnMenu"/>
</div>
を/ HTML(保守性、アクセシビリティ、ビューポートサイズの違いなど)があります。特に、ほとんどのビューポートでは4つの列が許可されません。ブートストラップコンポーネントはそれを助けることができます。そうでなければ、http://lea.verou.me/2011/01/styling-children-based-on-the--number-with-css3/のようなものがトリックを行う必要があります。 – NextThursday
はい、私は完全に同意しますが、お客様の願いは常にベストプラクティスを反映するとは限りません。この場合、顧客から与えられたhtml構造はtypoで再現されていました。私は自分自身が常に物をフロートするように努力します。スペースを減らすと列が少なくなります。 –