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Ú:
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
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
Chúc các bạn thành công.
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
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
Chúc các bạn thành công.
Nguồn: xenforo.com
Đính kèm
Bài viết liên quan
Bài viết mới