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

Плагины - Модули Side Menu System - Система бокового меню 1.0

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

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

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

ПРИМЕЧАНИЯ:
1. Это БЕСПЛАТНО, но все еще принадлежит мне. Это сделано для того, чтобы никто не брал с кого-либо плату за него или его компоненты ... Я выпустил это, чтобы помочь другим, если они захотят его использовать, а не в коммерческих целях.
2. Я не разработчик, поэтому могу помочь, когда смогу и как я могу, однако, я надеюсь, что мы все сможем помочь друг другу в улучшении этой модификации на благо всех, поэтому, пожалуйста, если вы что-то измените в этом, сообщите другим.
3. В связи с необходимостью изменить шаблон PAGE_CONTAINER могут возникнуть проблемы с другими надстройками, которые автоматически перезаписывают элементы в шаблоне PAGE_CONTAINER. Важно отметить, что изменения, которые я внес в PAGE_CONTAINER, комментируются, начиная с «IB» в шаблоне
4. Это было протестировано на стандартной установке XF со стилем по умолчанию, сторонние стили могут повлиять на эту модификацию.

Шаг 1 - Добавить пользовательское поле пользователя
a. В ACP (Панель управления администратора) перейдите в Пользователи -> Пользовательские поля пользователя, а затем «Добавить поле»
b. Заполните эти поля:
Идентификатор поля = расположение_пункта
меню = Положение меню Расположение
дисплея = Предпочтения
Тип поля = Флажки
* Затем в разделе «Параметры полей выбора» *
Возможные варианты:
Value = 1
Text = Right
* Затем в разделе «General Options» выберите то, что вам нравится *
Нажмите «Save», чтобы сохранить настраиваемое поле.

Шаг 2 - Измените параметр Sticky Navigation
a. В ACP перейдите в Внешний вид -> Свойства стиля и затем выберите «Заголовок и навигация»
b. Выберите «Прикрепленный элемент навигации» для «Только основная строка навигации».

Шаг 3 - Создайте новый шаблон CSS. ПРИМЕЧАНИЕ. Он должен называться nav_side_menu.less
a. В ACP перейдите в Внешний вид -> Шаблоны и нажмите Добавить шаблон.
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: 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;}
д. Нажмите Сохранить и выйти

Шаг 4 - Измените шаблон PAGE_CONTAINER
a. В ACP перейдите в Внешний вид -> Шаблоны, найдите шаблон PAGE_CONTAINER и нажмите на него, чтобы открыть
b. Обратите внимание на любые изменения, которые вы, возможно, внесли в этот шаблон вручную, поскольку впоследствии вам потребуется добавить их снова.
D. Скопируйте код в прикрепленном текстовом файле PAGE_CONTAINER и вставьте его поверх ВСЕГО существующего кода в шаблоне:
ПРИМЕЧАНИЕ. Вы заметите, что мои изменения были прокомментированы
e. Нажмите Сохранить и выйти из

TEST TEST TEST

Наслаждайтесь и надеюсь, что это поможет, пожалуйста, дайте мне знать ваши мысли и даже на каком сайте вы добавили его, чтобы я мог его увидеть ... спасибо

1554540417151-png.2867



1554540427069-png.2868



1554540435696-png.2869



1554540443839-png.2870



1554540452000-png.2871



1554540461632-png.2872



1554540468731-png.2873



1554540475697-png.2874


1554540485500-png.2875
Автор
ADMIN
Скачиваний
0
Просмотры
64
Первый выпуск
Обновление
Рейтинг
0.00 звезд Оценок: 0

Поделиться этим ресурсом

Верх