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

Плагины - Модули 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
Просмотры
81
Первый выпуск
Обновление
Рейтинг
0.00 звезд Оценок: 0

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

Верх