Sub-nodes in columns - Chia cột các Sub-node

[PVS]

Sub-nodes in columns - Chia cột các Sub-node

Vào template 'node_category_level_2' and 'node_forum_level_2'. Tìm: '<xen:if is="{$renderedChildren} AND {$level} == 2">'

Thay thế tất cả các nội dung của nó bao gồm cả '</xen: if>' với đoạn code sau:

<xen:if is="{$renderedChildren} AND {$level} == 2">
        <div class="subForumsPopup">
                <div class="subForumsMenu">
                        <ol class="secondaryContent blockLinksList">
                        <xen:foreach loop="$renderedChildren" value="$child">
                                {xen:raw $child}
                        </xen:foreach>
                        </ol>
                </div>
        </div>
</xen:if>

Và bây giờ phần cuối cùng với một số CSS. Bạn có thể đặt nó trong extra.css:

body .subForumsPopup
{
    margin: 0;
    float: none;
}

body .subForumsPopup .blockLinksList
{
    display: inline-table;
    width: 100%;
    box-sizing: border-box;
    word-spacing: -10px;
}

body .subForumsPopup .blockLinksList > li
{
    display: inline-block;
    width: 25%;
    word-spacing: 0;
    vertical-align: top;
}

body .subForumsPopup .blockLinksList .nodeTitle
{
    font-weight: normal;
}

body .subForumsPopup .blockLinksList .unread .nodeTitle
{
    font-weight: bold;
}

body .subForumsPopup .blockLinksList .nodeTitle a:before
{
    content: "";
    background: @primaryLighter;
    border-radius: 4px;
    margin-right: 5px;
    display: inline-block;
    height: 4px;
    width: 4px;
    vertical-align: middle;
}

body .subForumsPopup .blockLinksList li.node > .unread .nodeTitle a:before
{
    background: @primaryMedium;
}

Xong !

Bây giờ bạn có thể thiết lập chiều rộng các cột bằng cách thay đổi thuộc tính width trong
'body .subForumsPopup .blockLinksList > li'. Bạn có thể thiết lập các cột có thể chia cho 5 (50%, 25%, 15%, 10%) hoặc thậm chí cột không chính xác (33%). Không bao giờ thiết lập thuộc tính chiều rộng cao hơn 50% nếu bạn muốn để có được cột.

Kết quả là:

​

Một số người không thích node lồng bên trong, chúng ta có thể giấu chúng với mã đơn giản này:

.subForumsMenu .node .node
{
    display: none;
}

​

Chúc các bạn thành công.

Nguồn: xenforo.com​