Иконка ресурса

Side Menu System 1.1

Нет прав для скачивания
Заменяет стандартное меню, боковым меню.
Совместимость с XenForo
  1. 2.0.x
  2. 2.1.x
Видимая ссылка
Нет
Русификатор
Нет
Эта модификация заменяет стандартную горизонтальную систему меню под заголовком на систему меню бокового столбца с возможностью выбора пользователем его отображения слева или справа экрана.

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

Модификация включает 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 и вставьте код в поле под именем шаблона
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: 100;
    }

    .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 {
        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 0px;
        white-space: normal;
    }

    .p-nav-list .p-navEl.is-selected .p-navEl-link {
        padding-right: 0px;
    }

    .p-navgroup-link.p-navgroup-link--user .avatar {
        width: 32px;
        height: 32px;
        font-size: 19px;
        line-height: 32px;
    }

    .p-navgroup-link--logIn {
        font-size: 13px;
        padding: 8px 0px;
    }
    .p-navgroup-link--register {
        font-size: 13px;
        padding: 8px 0px;
    }
}

@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. Нажмите кнопку Сохранить и выйти
  • 5.jpg
    5.jpg
    107.3 КБ · Просмотры: 11
  • 6.jpg
    6.jpg
    105.4 КБ · Просмотры: 11
  • 7.jpg
    7.jpg
    101.7 КБ · Просмотры: 12
  • 8.jpg
    8.jpg
    152.6 КБ · Просмотры: 11
  • 9.jpg
    9.jpg
    51.1 КБ · Просмотры: 11
  • 1.jpg
    1.jpg
    101.4 КБ · Просмотры: 9
  • 2.jpg
    2.jpg
    99.4 КБ · Просмотры: 6
  • 3.jpg
    3.jpg
    146.2 КБ · Просмотры: 5
  • 4.jpg
    4.jpg
    100.2 КБ · Просмотры: 9
Автор
baltun
Скачиваний
0
Просмотры
878
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Похожие ресурсы
Назад
Верх Низ