 |
Краткое описание | Header Submenus позволит вам создать меню в шапке сайта — с подменю — используя обычный текст! |
 |
Предварительный просмотр | Предварительный просмотр в Discourse Theme Creator |
 |
Ссылка на репозиторий | https://github.com/discourse/discourse-header-submenus |
 |
Новичок в темах Discourse? | Руководство для начинающих по использованию тем Discourse |
Установить этот компонент темы
Возможности
Настольные компьютеры
Мобильные устройства
Настройки
| Название | Описание |
|---|---|
| Элементы меню | Добавьте элементы меню. По одному элементу на строку в следующем порядке: Текст, иконка, заголовок, отображение. |
| Элементы подменю | Добавьте элементы подменю. По одному элементу на строку в следующем порядке: Родитель, текст, иконка, URL, цель, заголовок. |
| SVG-иконки | Укажите классы иконок FontAwesome для каждой иконки, используемой в списках выше. |
| Фиксированный режим | Принудительно отображать меню в верхней части экрана независимо от позиции прокрутки — только для настольных компьютеров |
| Показывать стрелку | Показывать стрелки рядом с элементами меню |
| Инвертировать позицию | Отображать элементы меню на противоположной стороне экрана |
| Фон меню | Цвет фона меню. (hex, rgb, rgba или название цвета CSS) |
| Цвет элементов меню | Цвет элементов меню. (hex, rgb, rgba или название цвета CSS) |
| Фон активного элемента меню | Цвет фона элементов меню при их активации. (hex, rgb, rgba или название цвета CSS) |
| Цвет активного элемента меню | Цвет элементов меню при их активации. (hex, rgb, rgba или название цвета CSS) |
| Фон подменю | Цвет фона подменю. (hex, rgb, rgba или название цвета CSS) |
| Цвет элементов подменю | Цвет элементов подменю. (hex, rgb, rgba или название цвета CSS) |
| Фон элемента подменю при наведении | Цвет фона элементов подменю при наведении курсора. (hex, rgb, rgba или название цвета CSS) |
| Цвет элемента подменю при наведении | Цвет элементов подменю при наведении курсора. (hex, rgb, rgba или название цвета CSS) |
| Цвет разделителя | Цвет линий-разделителей в подменю. (hex, rgb, rgba или название цвета CSS) |
Существует четыре группы настроек
-
Элементы меню
Введите элементы, которые должны отображаться в меню. По одному элементу на строку, разделенному запятыми, в следующем порядке
Текст, иконка, заголовок, отображениеТекст: то, что отображается в меню.
Иконка: иконка, отображаемая рядом с элементом. Если вы не хотите использовать иконку, введитеnone.
Заголовок: текст, который появляется при наведении курсора на элемент.
Отображение: выберите, на каких устройствах будет отображаться элемент.
vdmотображается как на настольных компьютерах, так и на мобильных устройствах
vdoотображается только на настольных компьютерах,
vmoотображается только на мобильных устройствах.Из-за нехватки места не рекомендуется добавлять более 3-4 элементов на мобильных устройствах.
-
Элементы подменю
Введите список элементов подменю, которые вы хотите добавить в ваше меню. По одному элементу на строку, разделенному запятыми, в следующем порядке
Родитель, текст, иконка, URL, цель, заголовокРодитель: имя родительского элемента меню, под которым должен отображаться этот элемент подменю. Используйте значение
текстиз списка выше.
Текст: текст, который отображается для этого элемента подменю.
Иконка: иконка для этого элемента подменю, используйтеnone, если иконка не нужна.
URL: путь, на который ссылается этот элемент меню. Можно использовать относительные пути.
Цель: выберите, будет ли этот элемент открываться в новой вкладке или в той же. Используйтеblank, чтобы открыть ссылку в новой вкладке, илиself, чтобы открыть ее в той же вкладке.
Заголовок: текст, который появляется при наведении курсора на элемент.
Разделители: Вы также можете добавлять разделители между элементами подменю. Чтобы добавить разделитель, используйтеродитель, divider.
Вот быстрый пример, охватывающий пункты 1 и 2 выше:
Допустим, я хочу добавить элемент меню с названием Design и добавить несколько элементов в его подменю следующим образом
Сначала я введу это как menu_item
Design, magic, Get inspired!, vdm
А затем введу это как элементы sub_menu
Design, Galleries, th, #, blank, Cool galleries for you to look at.
Design, Design process, lightbulb-o, #, blank, Learn the basics.
Design, Blog design, columns, #, blank, What makes for a great blog?
Design, divider
Design, Freebies, gift, #, blank, Everyone likes freebies!
Design, Photoshop tutorials, book, #, blank, Photoshop for beginners.
Design, Design trends, bar-chart, #, blank, Stay on top of the current trends!
Вот и всё!
По умолчанию тема поставляется с меню-заглушкой, поэтому посмотрите на него и задавайте вопросы, если они возникнут.
-
Параметры макета.
Эти параметры довольно понятны
-
Параметры цвета
По умолчанию они пустые, но если вы добавите здесь цвет, он переопределит значения по умолчанию компонента, которые основаны на текущей цветовой схеме.
Размещено у нас? Компоненты тем доступны для использования на наших планах Standard, Business и Enterprise.
Большое спасибо!
