Side Menu System 1.1

Эта модификация заменяет стандартную горизонтальную систему меню под заголовком на систему меню бокового столбца с возможностью выбора пользователем его отображения слева или справа экрана.

Модификация предусматривает большее количество пунктов главного меню с увеличенными пунктами, чтобы отобразить больше того, что ваш форум может предложить пользователю и останавливает использование дополнительных функций и разделов форума.

Модификация включает 4 компонента:
1. Настраиваемое поле пользователя, чтобы разрешить пользователю выбирать правую сторону экрана меню, по умолчанию используется левое меню.
2. Делает подменю закрепленным в верхней части страницы.
3. Новый шаблон css-настройка параметров отображения меню бокового меню.
4. Измененный шаблон PAGE_CONTAINER для создания бокового столбца и отображения главного меню.

Настройка-

Шаг 1: Добавление настраиваемого поля пользователя:
a . В ACP перейдите к Пользователи - > Пользовательские поля и затем "Добавить поле">
b . Заполните эти поля:
Поле ID = menu_position
Заголовок = Позиция Меню
Расположение отображения = настройки
Тип поля = флажки
* Затем в разделе "Параметры полей выбора" *
Возможные варианты:
Значение = 1
Текст = Справа
* Затем в разделе "Общие параметры" выберите то, что вам нравится *
Нажмите кнопку "СОХРАНИТЬ", чтобы сохранить настраиваемое поле

Шаг 2: изменение настройки навигации Sticky
a. В ACP перейдите внешний вид - > Свойство стиля и затем выберите "Заголовок и навигация ">
b. Выберите опцию "Элементы меню навигации" в "Только основная строка навигации "

Шаг 3: Создайте новый css шаблон, он должен называться nav_side_menu.less
a. В ACP перейдите к внешний вид - > шаблоны и нажмите Aдобавить шаблон>
b. Введите в поле имя шаблона nav_side_menu.less
c. Скопируйте следующий css и вставьте код в поле под именем шаблона








Код: Скопировать


@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. Нажмите кнопку Сохранить и выйти

Шаг 4: изменение шаблона PAGE_CONTAINER
a. В ACP перейдите к внешний вид - > шаблоны найдите шаблон PAGE_CONTAINER и нажмите на него, чтобы открыть>
b. Обратите внимание на любые изменения, которые вы, возможно, вручную сделали в этот шаблон, как вам нужно будет добавить их обратно в дальнейшем
d. Скопируйте код в вложенный текстовый файл PAGE_CONTAINER и вставьте его поверх всего существующего кода в шаблоне:

Примечание: Вы заметите, изменения были прокомментированы
e. Нажмите кнопку Сохранить и выйти