Как сделать табы в битрикс
Добавил пользователь Дмитрий К. Обновлено: 05.10.2024
CSS табы с переходом по наведению курсора мышки. Результат изменения сохраняется
Если :hover заменить на :active, то будет самый чистый HTML код табов, где смена содержимого осуществляется нажатием на вкладку.
Меню вкладками, где смена блоков происходит при наведении мышки. Появляющееся поле не фиксируется и как только курсор уходит с формы, снова видимой становится первая часть
- первая вкладка
- вторая вкладка
- третья вкладка
Меню вкладками, где поле изначально скрыто. Появляется или при наведении, или по клику. Если щелкнуть вне меню, то оно свернётся.
165 комментариев:
Протестировала, всё работает, даже в Опера.Мини. RusyLev Очень интересный обзор, на некоторых своих сайтах именно ваши табы и использую.
Но возник вопрос, как можно модифицировать 1-ый пример табов, чтобы сами табы были слева?
В хроме (в мозиле рамка чуть меньше, чем в хроме. Хорошо), всё отлично, к большому удивления в Яндекс браузере рамка на четверть текста, в ИЕ и в Опере тоже самое, а вот в Опере-мини отображает коректно.
Сначала винил изображения, они присутствуют, после урал всё, оставил только голый текст и поменял значения высоты (380px, в двух местах, согласно инструкции) проблема не решилась.
Подскажите пожалуйста, как это решить?
ЯПлакать. Анонимный Забыл представиться, Михаил. NMitra height: 209px; заменить на height: 339px; Анонимный NMitra, вы прелесть и 41 раз умница! Большое Вам спасибо
Михаил Анонимный Здравствуйте. Подскажите пожалуйста, как в четвёртом примере добавить ещё span (колонки). У меня нарушается порядок их перехода или не работает вовсе.
Спасибо. NMitra Здравствуйте
Анонимный Благодарю. ornyse.ru Скажите а как сделать чтобы (CSS табы с переходом по наведению курсора мышки. Результат изменения сохраняется.) отображался на странице во всю ширину и длинну страницы? А то добавляешь например картинку а она со скролом , а когда переходишь на вкладку другую, картинку с другой вкладки видно, тоесть она торчит снизу обрезанная? NMitra "во всю ширину и длину страницы" - она и так во всю ширину.
во всю высоту я попробую один вариант. Чтобы не было видно хвоста
.korpus
.korpus label
.korpus input[type="radio"]:checked + label
.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) Анонимный Спасибо за материал. NMitra Рада помочь. zloe-aloe спасибо, отличная штука!
не подскажете, почему не получается 4-й вариант сделать с 6-ю вкладками?
.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(2),
.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(3),
.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(4),
.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(5),
.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(6),
.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(2),
.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(3),
.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(4),
.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(5),
.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(6),
.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(3),
.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(4),
.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(5),
.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(6),
.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(2),
.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(4),
.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(5),
.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(6),
.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(2),
.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(3),
.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(5),
.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(6),
.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(2),
.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(3),
.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(4),
.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(6),
.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(2),
.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(3),
.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(4),
.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(5),
NMitra Рабочий вариант:
NMitra zloe-aloe спасибо большое! Денис Демин Здраствуйте, уважаемый автор ! Сначала хотелось бы поблагодарить за очень полезную статью и попросить помощи. Мне нужно сделать так : Вариант №1 идет как основной, а в третьей вкладке должен находиться вариант №2. Подскажите пожалуйста, как это реализовать ! ?
Если будет работать (я не проверяла), то скрипт уберёте в конец body maritca NMitra, никак не могу додумать. Мне нравится ваш третий вариант тем, что окно, если оно со скроллом, не скачет при переключении вкладок, но я не могу понять, что нужно изменить, чтобы вкладки менялись всё-таки при клике, а не по наведению. И можно ли не задавать высоту дивов, а сделать так, чтобы высота определялась для каждой вкладки автоматически? Я так попробовала, но у меня остаётся видимой часть дива с наибольшей высотой. Либо как изменить первый вариант так, чтобы окно не "прыгало". Или это невозможно со свободной высотой дивов? NMitra Окно не будет прыгать если будет задана фиксированная высота у вкладок. Высота вкладки меняется и она смещает вниз остальной контент. Можно сделать что-то типа всплывающего меню. Когда все вкладки сначала скрыты, а при нажатии на пункт меню появляются над контентом. Посмотрите как у Сбербанка сделано меню "Взять кредит", "Выбрать карту", "Накопить и сохранить", . Анонимный Здравствуйте. А можно ли поместить таб внутри таба? Пробовала на первом примере, не получилось. Анонимный NMitra, а у меня ИЕ 11 почему-то не поддерживает. Это же не старый браузер. Что-нибудь можно сделать? NMitra Здравствуйте, id должен быть индивидуальным, name должен быть индивидуальным каждого таба. То есть вот так:
NMitra Я ещё раз проверила на IE, всё работает. У вас не работают примеры именно с моей страницы или когда вы добавляете их на свой сайт? Используете Windows? Александра Помойницкая Добрый вечер! Подскажите пожалуйста как сделать первый вариант с 9-ью вкладками.
.tab-block > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.tab-block > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.tab-block > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.tab-block > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.tab-block > input:nth-of-type(5):checked ~ div:nth-of-type(5),
.tab-block > input:nth-of-type(6):checked ~ div:nth-of-type(6),
.tab-block > input:nth-of-type(7):checked ~ div:nth-of-type(7),
.tab-block > input:nth-of-type(8):checked ~ div:nth-of-type(8),
.tab-block > input:nth-of-type(9):checked ~ div:nth-of-type(9)
так прописала и ничего не работает..просто все 9 дивов в столбик выстроились.
Подскажите пожалуйста как прописать. Спасибо. NMitra
Анонимный а как сделать, чтобы не было двойных границ? некрасиво же. NMitra Регулируется bottom, например,
bottom: 1px;
замените на
bottom: 0px;
или более подходящее вам значение. Exari Constantin А как в первом варианте добавить еще 2 вкладки?
.korpus > div, .korpus > input
NMitra Чтобы в IE работало
Сергей Анатольевич Очень жаль, но первые 3 варианта не работают на родном браузере андроид устройств, будут ли какие рекомендации?
Прям совсем пичальбеда. Нужно реализовать список "популярные производители" - "все производители", решил воспользоваться вашим методом вкладок, но вылез вот такой жирный минус. Просто необходимы решения на чистом CSS, без JS во избежание проблем с индексацией поисковыми системами.
Спасибо. NMitra На CSS - это все возможные варианты: :checked, :target, :hover. Есть ещё :focus, но он в данном случае не в тему.
.korpus0 > label <> Александр Все именно так и сделано:
Вопрос №1. Как сделать матрешку из вкладок с этим кодом (ссылка выше)? а то пытался и бестолку(
На сайте хочу сделать одну огромную страницу, в которой приблизительно по прикидкам в сумме будет 24 вкладки. Указано в примере ниже.
Вопрос №2. Как сделать ширину для кнопок (т.е. у каждого слоя матрешки вкладок будет разная ширина, как про цвета написал ниже.), чтоб они подстраивались не только под размер текста, но и под ширину страницы.
Ширина страницы 830px, но для кнопок она должна быть 800px (т.е. чтоб небольшие отступы все же были от краев страницы; желательно, но не обязательно).
Хотя как вариант сделать в % размер кнопок, который и будет зависить от ширины страницы.
Вопрос №3. Как сделать разные цвета в разных слоях матрешки вкладок? Указано в примере ниже.
P.S. как вариант, можете добавить в саму статью про это, не думаю, что только у меня такие вопросы возникают или возникнут.
Пример:
1) профессия 1 Подразделяется на: [цвет1]
1.1) вкладка 1.1
1.2) вкладка 1.2 [цвет3; у этих 4 вкладок]
1.3) вкладка 1.3
1.4) вкладка 1.4
2) профессия 2 Подразделяется на: [цвет1]
2.1) вкладка 2.1 Подразделяется на: [цвет2]
2.1.1) вкладка 2.1.1
2.1.2) вкладка 2.1.2 [цвет3; у этих 4 вкладок]
2.1.3) вкладка 2.1.3
2.1.4) вкладка 2.1.4
2.2) вкладка 2.2 Подразделяется на: [цвет2]
2.2.1) вкладка 2.2.1
2.2.2) вкладка 2.2.2 [цвет3; у этих 4 вкладок]
2.2.3) вкладка 2.2.3
2.2.4) вкладка 2.2.4
3) профессия 3 Подразделяется на: [цвет1]
3.1) вкладка 3.1
3.2) вкладка 3.2
3.3) вкладка 3.3
3.4) вкладка 3.4 [цвет3; у этих 7 вкладок]
3.5) вкладка 3.5
3.6) вкладка 3.6
3.7) вкладка 3.7
4) профессия 4 Подразделяется на: [цвет1]
4.1) вкладка 4.1
4.2) вкладка 4.2
4.3) вкладка 4.3 [цвет3; у этих 5 вкладок]
4.4) вкладка 4.4
4.5) вкладка 4.5
5) профессия 5 Подразделяется на: [цвет1]
5.1) вкладка 5.1
5.2) вкладка 5.2 [цвет3; у этих 2 вкладок]
Анонимный Ах да, забыл.
overflow: auto;
height: 208px; /* ваша высота */ sat То есть, весь это код таба обернуть?
NMitra Нет, внутри div, например, не
sat Спасибо, получилось. Извиняюсь за дерзость)), а есть столь же простой вариант, чтобы без прокрутки? NMitra Предыдущий комментарий не к той статье написала :)
Увеличьте высоту height: 300px;
Лёха
слэш в конце это пережиток Doctype XHTML1.0
в html5 не нужен он
Модуль содержит некоторые инструменты, которые будут полезны редакторам сайта. В модуль входят инструменты по автоматическому уменьшению изображений в контенте (ресайз изображений), водяной знак на изображениях, спойлер в тексте, табы (закладки) и другой функционал.
Все модули устанавливаются и обновляются только на активные лицензии 1С-Битрикс: Управление сайтом. Узнать про лицензии можно на странице продление лицензии 1С-Битрикс.
Обратите внимание! Модуль на новом визуальном редакторе не работает! Мы обязательно интегрируем его в новый редактор, как только 1С-Битрикс реализует возможность добавления стороннего функционала в редакторе!
Модуль содержит некоторые инструменты, которые будут полезны редакторам сайта. На данный момент представлены следующие функции:
1. Создание миниатюры изображений на страницах.
Все изображения при сохранении страницы автоматически уменьшаются в размерах (делается миниатюра и коррекция исходного изображения) согласно размерам, заданным в настройках. Функционал можно подключить как к инфоблокам так и к статическим страницам.
Миниатюры кликабельны - при клике отображается увеличенная картинка.
В настройках модуля можно указать размеры миниатюр, настроить наложение водяного знака.
2. Спойлер - возможность спрятать часть текста на странице.
Спойлер обычно используют для уменьшения объемов материала, пряча туда не важный материал (дополнительные фото, описания и т.п.). Посетитель сайта может просмотреть спрятанный материал, кликнув по спойлеру (спойлер развернется).
Спойлер можно задать в визуальном редакторе - просто выделить текст и нажать кнопку в панели редактора. При этом выделенный текст автоматически поместится в спойлер (выделится в рамку). Есть возможность изменить заголовок спойлера.
Обратите внимание! Если вы сменили шаблон табов, то все, созданные ранее табы на страницах сайта необходимо пересохранить, иначе они будут отображаться некорректно! Это связано с несовместимостью шаблонов табов.
Если информации на странице очень много, её удобно структурировать по темам и разместить в так называемых "табах" - по функционалу похожи на "Спойлеры", только объединяются в одном месте и при отображении просто переключаются между собой.
Внешний вид таба:
4. Замена фона
Иногда требуется быстро заменить фон сайта (например украсить к празднику или к проводимой акции). Под фоном сайта здесь понимается место на сайте по бокам от основного содержимого (при условии, что сайт не тянется на 100%).
5. Текст для авторизованных.
Редактор может выделить части контента сайта на странице, которые будут недоступны для неавторизированных посетителей.
Пример:
6. Редирект ссылок.
Ссылки на другие ресурсы теперь можно легко сделать непрямыми, что исключает утечку "веса страницы" другим ресурсам.
В настройках модуля можно управлять работой каждого представленного функционала по отдельности. По умолчанию - все включены.
Каждый функционал можно настраивать по отдельности.
Все вставляемые в детальное описание элемента изображения можно в автоматическом режиме уменьшать до заданных размеров. При этом изображения становятся кликабельными - т.е. при клике по нему мышкой, всплывает окно с увеличенным размером изображения.
В настройках модуля можно указать изображение (например логотип), который будет накладываться поверх изображений - так называемый "Водяной знак". Можно управлять положением этого изображения, его прозрачностью.
Инструмент "Спойлер" имеет минимум настроек. На данный момент в настройках вы можете выбрать шаблон спойлера - внешний вид. Обратите внимание, что внешний вид спойлера желательно выбрать перед началом его использования - при изменении шаблона старые спойлеры на сайте (сделанные до изменения шаблона) могут отображаться некорректно. Это связано с тем, что у шаблонов могут отличаться html-код спойлера и скрипты обработки.
Работать со спойлером довольно просто - достаточно выделить текст и нажать на кнопку в редакторе:
Заголовок спойлера можно задать свой - просто впишите нужный текст.
На данный момент спойлер в спойлере (вложенность) не поддерживаются!
Если удалить модуль, все спойлеры будут отображаться раскрытыми - никаких элементов управления, стилей и скриптов не подгрузится.
Инструмент "Табы" имеет несколько шаблонов. Как и в случае с инструментом "Спойлер" необходимо определиться с шаблоном до того, как начнете пользоваться инструментом. Связано это с разными html-кодами и скриптами у каждого шаблона табов.
Настройки шаблона можно корректировать в любое время - после изменения параметров на сайте все табы автоматически примут установленный вид и цвет.
Примеры настроек шаблонов инструмента "Табы"
Чтобы задать таб на сайте, нужно выделить нужный текст и нажать на кнопку, в визуальном редакторе:
Не забудьте заполнить заголовок таба
Все установленные табы объединяются в один блок, если между ними нет никакого текста.
Например следующие три таба на сайте объединятся в один блок:
На данный момент табы в табах (вложенность) не поддерживаются!
При отключении инструмента "Табы" - вся информация, находящаяся в табах, будет отображена на сайте в обычном формате.
При этом заголовок таба будет выводиться перед содержимым соответствующего таба.
Иногда требуется быстро заменить фон сайта. Под фоном сайта здесь понимается место на сайте по бокам от основного содержимого (при условии, что сайт не тянется на 100%).
В настройках нужно задать html-элемент, к которому будет применяться загруженный фон для сайта.
По умолчанию применяется к тэгу .
Обратите внимание, что не на всех сайтах данное решение будет работать корректно. Все зависит от верстки вашего сайта. Не всегда на сайте есть элемент, который будет занимать 100% места за сайтом, в качестве фона сайта.
Если у вас возникли вопросы по работе модуля, вы можете задать их нам в техподдержку: Техподдержка модулей для 1С-Битрикс
Привет! И так, продолжаем разруливать тему "Битрикс". И сегодня посмотрим как на самом деле происходит создание меню на Битрикс. Как это ни странно, но без небольшого багажа знаний и ухищрений этот процесс может вызвать затруднения у многих обывателей, решивших что Битрикс им по зубам:)
Что именно будем делать в этом уроке?
Создадим на сайте 3 типа меню:
Верхнее - тип top (файлы с именем .top.menu.php)
Верхнее 2 и 3 уровня - тип subtop (файлы с именем .subtop.menu.php)
Нижнее - тип bottom (файлы с именем .bottom.menu.php)
Верхнее меню будет наследоваться из разделов и будет многоуровневым. Нижнее же меню будет обычным одноуровневым меню, лежащим в корне.
Сделаю небольшой экскурс. Так как практически вся работа битрикса (обработка данных и их вывод) основана на различных компонентах, то стоит пояснить с чем мы имеем дело в данном уроке.
Компонент Menu (bitrix:menu).
Компонент выводит меню указанного типа. Компонент является стандартным и входит в дистрибутив модуля. В визуальном редакторе компонент расположен по пути: Служебные > Навигация > Меню. В поставку продукта входят следующие шаблоны компонента Меню (bitrix:menu):
- Горизонтальное многоуровневое выпадающее меню (Яркий) (horizontal_multilevel);
- Левое меню (Яркий) (left);
- Вертикальное меню по умолчанию (Встроенный шаблон) (.default);
- Голубое меню в виде закладок (Встроенный шаблон) (blue_tabs);
- Серое меню в виде закладок (Встроенный шаблон) (grey_tabs);
- Древовидное меню (Встроенный шаблон) (tree);
- Вертикальное многоуровневое выпадающее меню (Встроенный шаблон) (vertical_multilevel).
Пример вызова
Немного о параметрах, которые вы видите в примере вызова компонента.
ROOT_MENU_TYPE - Тип меню для первого уровня. Указывается тип меню верхнего уровня, соответствующий данному меню.
MAX_LEVEL - Уровень вложенности меню. В настройках компонента в выпадающем списке можно выбрать уровень вложенности. Доступно четыре уровня. Чем больше число, тем пункты более низких уровней будут отображены.
CHILD_MENU_TYPE - Тип меню для остальных уровней. Здесь указываем тип меню для меню нижних уровней.
USE_EXT [Y|N] - Дает возможность подключать файлы с именами вида .тип_меню.menu_ext.php. Подобные файлы нам очень понадобятся когда придется склеивать воедино нужные статические элементы меню и динамически сгенерированные пункты.
DELAY [Y|N] - Откладывает выполнение шаблона меню. При отмеченной опции выполнение шаблона будет происходить после загрузки страницы. Очень удобен при включенном кэшировании компонента, если нужно все же выполнять какие-то действия по модификации внешнего вида пунктов меню в зависимости от текущей страницы. Например, добавление пунктов меню в компонентах.
ALLOW_MULTI_SELECT [Y|N] - Разрешить несколько активных пунктов одновременно.
CACHE_TYPE - Тип кэширования.Варианты:
- A - Авто: автоматически обновляет кэш компонентов в течение заданного времени;
- Y - Кэшировать: для кэширования необходимо определить время кэширования;
- N - Не кэшировать: кэширования нет в любом случае.
MENU_CACHE_TIME - Время кэширования. Задается в секундах.
MENU_CACHE_USE_GROUPS - Учитывать права доступа. При кэшировании будут учитываться права доступа пользователя к тем или иным пунктам меню. Если меню построено без учета прав доступа, флажок лучше снять - это уменьшит размер кэша.
MENU_CACHE_GET_VARS - Значимые переменные запроса. Если отображение меню зависит от параметров страницы, то при использовании кэширования необходимо указать параметры в этом поле. Параметры вводятся через запятую.
Стандартный набор параметров впечатляет, правда?)
Перейдем непосредственно к коду!
Верхнее меню будет наследоваться из разделов и будет многоуровневым. Нижнее меню будет обычным одноуровневым меню, лежащим в корне. Создадим в корне файловой системы меню. Это можно сделать через административный раздел, либо же просто создать файл с именем .ТИП_МЕНЮ.menu.php следующего содержания (пример для файла меню типа top):
Если к примеру нужно создать вложенные пункты в пункте About в верхнем меню, можно воспользоваться архитектурой 1С-Битрикс и создать разделы /about/ и /about/profile/, а так же по меню типа "top" в каждом из них (пока не будем создавать страниц, только файловую структуру разделов и меню).
Далее надобно разместить сам компонент меню bitrix:menu на тестовой странице или же где-нибудь в шаблоне, к примеру в footer.php или header.php, в дальнейшем будем работать с ним.
Нижнее меню (bottom)
Советую начать с нижнего меню, оно проще и позволит хорошенько изучить и понять логику работы компонента. Воспользуемся шаблоном .default (он есть в стандартной сборке) и зададим для работы компонента меню типа "bottom" (нижнее):
Этот код вам уже знаком с примера вызова компонента, который мы рассматривали выше. Так как в Битриксе шаблоны компонентов изначально лежат в папках с компонентами, лучше скопировать оригинальный дефолтный шаблон в папку с конкретным общим шаблоном нашего сайта, это надо делать как минимум для того чтобы не портить шаблон ядра компонента и чтобы все наши наработки не слетели при первом же обновлении системы. Поэтому скопируем шаблон компонента под именем "bottom" в шаблон сайта. Хоть это очень лаконичный шаблон, в целях обучения мы не возьмём от него практически ничего:
В этом коде вы можете познакомится со своим другом, который будет вас преследовать на всех этапах разработки на Битрикс, это суперглобальный массив $arResult. В нем хранится все, что может вам понадобится в процессе создания сайта, а то что вы там не найдете можно в любой момент подключить или выбрать с базы благодаря чудо-файлу result_modifier.php, который находится в папке шаблона каждого компонента.Если в изначальной сборке вы его не обнаружили ничего страшного, его всегда можно создать и использовать на свое усмотрение.
Создается этот файл еще и для того, чтобы отделить логику от верстки, то есть обработав всю логику в файле result_modifier.php все полученные данные будут доступны для вывода в шаблоне компонента (файл template.php).
Давайте сделаем "вардамп" наших элементов и посмотрим, что за параметры нам предоставит массив $arResult.
Поставим этот код сразу после начала цикла и сохраним шаблон. Основное, на что нам надо обратить внимание, это параметры:
Параметр [SELECTED] не пуст тогда, когда пункт меню соответствует нашему местонахождению в структуре сайта, то есть когда пункт выбран. Значит, мы легко можем использовать его для вывода нужного нам стиля, к примеру:
Параметр [ITEM_INDEX] отражает номер пункта меню в массиве. Вся хитрость в том, что мы можем использовать его для простановки разделителей между главными пунктами меню. Слегка подкорректируем вёрстку и выведем разделитель следующим кодом:
В итоге, на данном этапе, соединив все в кучу, шаблон компонента меню будет выглядеть так:
Также мы смело можем удалить лишние файлы, который нам достались при копировании оригинального шаблона .default.
Теперь размещаем вызов компонента нижнего меню вместо статики в шаблоне, которую я указывал ранее. Не забываем указывать тип и время кэширования, если конечно оно вам надо:)
Вуаля!) Простое нижнее меню готово, причем мы успели сделать разделители между пунктами, а также сделали возможность выделять активный пункт, заняло это всего две строчки кода, поэтому все очень быстро и удобно, главное понять логику работы компонента.
Ждите скоро продолжение - реализацию динамического верхнего меню и подписывайтесь на нас в соцсетях:) Будет очень интересно!
В предыдущем видео мы сделали обзор системы Битрикс 24. В первую очередь, мы рассматривали Битрикс как планировщика задач, или таск-менеджера. Но Битрикс 24 – это не только таск-менеджер, но и CRM, коммуникационный центр, платформа для создания сайтов, система бухгалтерского учета и многое другое.
Сегодня мы поговорим о том, как организована работа именно CRM в Битрикс 24. CRM – это система управлением взаимоотношениями с клиентом. То есть это система отслеживания сделок, коммерческих предложений, база партнеров и так далее. Как это можно использовать в работе НКО, вы узнаете из нашего сегодняшнего видео.
Будьте с нами на связи,
несмотря на алгоритмы
Как победить алгоритмы: прочитай инструкции, как настроить приоритетный показ материалов в социальных сетях и подключить RSS-ленту.
Читайте также: