Tutorial 2x Side Menu System - Hệ thống menu side cho XenForo 2

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Side Menu System - Hệ thống menu side cho XenForo 2 1.1

Sửa đổi này thay thế tiêu chuẩn nằm ngang bên dưới hệ thống menu header bằng hệ thống menu cột bên với người dùng có thể chọn màn hình hiển thị ở bên trái hoặc bên phải màn hình.

Nó cung cấp cho số lượng lớn hơn các mục menu chính với gia tăng không gian để hiển thị nhiều hơn những gì trang web của bạn có thể cung cấp cho người dùng.

Việc sửa đổi bao gồm 4 thành phần:
1. Custom User Field - để cho phép người dùng chọn bên phải màn hình cho menu hiển thị, mặc định là trái
2. Thay đổi thành 1 thiết lập - để làm cho menu phụ ghim trên đầu trang
3. Template css mới - để đặt tham số hiển thị của menu cột bên
4. Template PAGE_CONTAINER đã sửa đổi - để tạo cột bên và hiển thị menu chính

GHI CHÚ:
  • Do nhu cầu sửa đổi template PAGE_CONTAINER, có thể có các tác động đến các addon khác tự động ghi đè các phần tử trong template PAGE_CONTAINER. Điều quan trọng cần lưu ý là những thay đổi trong hướng dẫn này đã thực hiện đối với PAGE_CONTAINER được comment bắt đầu bằng "IB" trong template
  • Điều này đã được thử nghiệm trên bản cài đặt XF tiêu chuẩn với style mặc định, style của bên thứ 3 có thể ảnh hưởng đến sửa đổi này
Bước 1 - Thêm Custom User Field
a. Trong ACP (Admin Control Panel) đến Users -> Custom user fields và chọn "Add Field"
b. Hoàn thành các trường sau:
Field ID = menu_position
Title = Menu Position
Display location = Preferences
Field type = Check boxes
* Sau đó là "Options for choice fields" *
Possible choices:
Value = 1
Text = Right
* Tiếp theo là "General Options" chọn những gì bạn thích *
Click "Save" để lưu lại Custom Field

Step 2 - Thay đổi thiết lập Sticky Navigation
a. Trong ACP đến Appearance -> Style properties và chọn "Header and Navigation"
b. Chọn option "Sticky navigation element" thành "Primary navigation row only"

Step 3 - Tạo template css mới. LƯU Ý - tên nó phải được đặt là nav_side_menu.less
a. Trong ACP đến Appearance -> Templates và chọn Add template
b. Nhập tên Template là nav_side_menu.less
c. Sao chép css bên dưới và dán nó vào hộp code bên dưới trường tên template
Mã:
@media (min-width: 651px) {
    .menu_right {margin-right:72px;}
    .menu_left {margin-left:72px;}

    .p-navSticky {
        position: fixed !important;
        width: 72px;
        top: 0 !important;
        right: 0;
        bottom: 0 !important;
        overflow: auto;
        background: #fff;
        box-shadow: 0 0 8px 3px rgba(0,0,0,0.3);
    }

    .side_menu_sticky{
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99;
    }

    .side_left_nav.p-navSticky {
        left: 0;
        z-index: 1000;
    }

    .p-nav-list>li , .p-navgroup-link , .p-nav-inner{
        display: block;
    }

    .p-navgroup , .p-navgroup-link {
        float: none;
        text-align: center;
    }

    .p-nav-list .p-navEl.is-selected .p-navEl-link , .p-nav-list .p-navEl-link , .p-navgroup-link {
        width: 100%;
        text-align: center;
        color: #185886;
        font-size: 11px;
    }
    .p-nav-list .p-navEl-link--splitMenu, .p-nav-list .p-navEl-splitTrigger {
        width: 100%;
        text-align: center;
        padding: 8px 0 8px 2px !important;
        font-size: 11px;
        font-family: 'Droid Sans', sans-serif;
    }

    .p-nav-list .p-navEl-splitTrigger  {
        width: 25%;
        color: #185886;
        font-size: 13px;
        text-align: center;
    }

    .p-navgroup {
        background: none;
    }

    .p-nav-opposite {
        text-align: center;
        margin-right: 0px;
    }
    .p-nav {
        color: #185886;
        background: transparent;
    }
    .p-navgroup-link.badgeContainer {
        font-size: 13px;
    }
 
    .p-navSticky--primary.is-sticky .p-nav-list .p-navEl-link.p-navEl-link--splitMenu ,
    .p-nav-list .p-navEl-link.p-navEl-link--splitMenu {
        padding-right: 15px;
    }
    .menu--account {
        top: 0px !important;
    }
 
    [data-load-target=".js-convMenuBody"] {
        top: 40px !important;
    }
 
    [data-load-target=".js-alertsMenuBody"] {
        top: 74px !important;
    }
 
    .menu--account , [data-load-target=".js-convMenuBody"] , [data-load-target=".js-alertsMenuBody"]  {
        right: 72px !important;
        left: initial !important;
    }
 
    .menu.menu--structural.side_search_menu {
        right: 72px !important;
        left: initial !important;
        margin-top: -30px;
    }
 
    .menu_position_left .menu--account , .menu_position_left [data-load-target=".js-convMenuBody"]
    , .menu_position_left [data-load-target=".js-alertsMenuBody"] , .menu_position_left .menu.menu--structural.side_search_menu  {
        left: 72px !important;
    }
    .p-navgroup-link.badgeContainer:after {
        left: 45px;
    }
    .badgeContainer:after {
        word-break: break-all;
        margin-right: 1px !important;
    }
    a.p-navgroup-link.p-navgroup-link--iconic.p-navgroup-link--whatsnew , .p-nav-list .p-navEl-splitTrigger
    , span.menu-arrow , .hScroller-action ,.p-navgroup-link.p-navgroup-link--iconic .p-navgroup-linkText, .p-navgroup-link.p-navgroup-link--textual i ,
    .p-navSticky--primary.is-sticky .p-nav-list .p-navEl.is-selected .p-navEl-splitTrigger  , .p-nav-scroller .hScroller-action.hScroller-action--end{
        display: none !important;
    }
    .p-sectionLinks-list .p-navEl-link.p-navEl-link--splitMenu {
        padding-right: 6px;
    }
    .p-navgroup-link--iconic i {
        font-size: 18px;
    }
    .p-navgroup-link {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .p-navgroup-link:hover ,.p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen):hover,
    .p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen) .p-navEl-link:hover,
    .p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen) .p-navEl-splitTrigger:hover {
        background: rgb(199, 221, 243);
    }
    .p-navgroup.p-discovery {
        margin-left: 0em;
    }
    .p-navgroup-link {
        border-left: 0px solid rgba(20, 20, 20, 0.15);
    }
    .p-nav-list .p-navEl-link {
        padding: 8px 5px;
        white-space: normal;
    }
    .p-navgroup-link.p-navgroup-link--user .avatar {
        width: 32px;
        height: 32px;
        font-size: 19px;
        line-height: 32px;
    }
}

@media (max-width: 650px) {
    .menu_right {margin-right: 0px;}
    .menu_left {margin-left: 0px;}
}

d. Click vào Save and Exit

Bước 4 - Chỉnh sửa template PAGE_CONTAINER
a. Trong ACP đến Appearance -> Templates, tìm template PAGE_CONTAINER và bấm vào nó để mở
b. Lưu ý bất kỳ thay đổi nào bạn có thể đã thực hiện thủ công cho template này vì bạn sẽ cần thêm lại chúng sau đó
d. Sao chép code trong tệp văn bản PAGE_CONTAINER đính kèm và dán TẤT CẢ vào template:
LƯU Ý - bạn sẽ nhận thấy những thay đổi của đều kèm theo comment
e. Click Save and Exit

1.jpg 2.jpg 3.jpg 4.jpg 5.jpg 6.jpg 7.jpg 8.jpg 9.jpg
Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Đính kèm

  • PAGE_CONTAINER.txt
    31.6 KB · Lượt xem: 1
  • PAGE_CONTAINER-1.1.txt
    30.5 KB · Lượt xem: 5

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom