2017-08-16 2 views
0

Typo3にノードがあり、その中に4列のメニューとして表示したいページがたくさんあります。列の並べ替えは、左から右にしてラップアラウンドする必要があります。このようTypo3のメニューを複数の列に分割するにはどうすればいいですか?

Col1  Col2  Col3  Col4 
A   B   C   D 
E   F   G 
+1

を/ HTML(保守性、アクセシビリティ、ビューポートサイズの違いなど)があります。特に、ほとんどのビューポートでは4つの列が許可されません。ブートストラップコンポーネントはそれを助けることができます。そうでなければ、http://lea.verou.me/2011/01/styling-children-based-on-the--number-with-css3/のようなものがトリックを行う必要があります。 – NextThursday

+0

はい、私は完全に同意しますが、お客様の願いは常にベストプラクティスを反映するとは限りません。この場合、顧客から与えられたhtml構造はtypoで再現されていました。私は自分自身が常に物をフロートするように努力します。スペースを減らすと列が少なくなります。 –

答えて

0

私の解決策では(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> 
関連する問題