Подменю заголовка

[Discourse]

	Краткое описание	Header Submenus позволит вам создать меню в шапке сайта — с подменю — используя обычный текст!
	Предварительный просмотр	Предварительный просмотр в Discourse Theme Creator
	Ссылка на репозиторий	https://github.com/discourse/discourse-header-submenus
	Новичок в темах Discourse?	Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

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

 Поддержка  Ошибка  Интерфейс  Функция

Возможности

Настольные компьютеры

Мобильные устройства

Настройки

Название	Описание
Элементы меню	Добавьте элементы меню. По одному элементу на строку в следующем порядке: Текст, иконка, заголовок, отображение.
Элементы подменю	Добавьте элементы подменю. По одному элементу на строку в следующем порядке: Родитель, текст, иконка, 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)

Существует четыре группы настроек

1. Элементы меню

   Введите элементы, которые должны отображаться в меню. По одному элементу на строку, разделенному запятыми, в следующем порядке

   Текст, иконка, заголовок, отображение

   Текст: то, что отображается в меню.
   Иконка: иконка, отображаемая рядом с элементом. Если вы не хотите использовать иконку, введите none.
   Заголовок: текст, который появляется при наведении курсора на элемент.
   Отображение: выберите, на каких устройствах будет отображаться элемент.

   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vdm отображается как на настольных компьютерах, так и на мобильных устройствах
   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vdo отображается только на настольных компьютерах,
   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vmo отображается только на мобильных устройствах.

   Из-за нехватки места не рекомендуется добавлять более 3-4 элементов на мобильных устройствах.

2. Элементы подменю

   Введите список элементов подменю, которые вы хотите добавить в ваше меню. По одному элементу на строку, разделенному запятыми, в следующем порядке

   Родитель, текст, иконка, 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!

Вот и всё!

По умолчанию тема поставляется с меню-заглушкой, поэтому посмотрите на него и задавайте вопросы, если они возникнут.

3. Параметры макета.

   Эти параметры довольно понятны

   

4. Параметры цвета

   По умолчанию они пустые, но если вы добавите здесь цвет, он переопределит значения по умолчанию компонента, которые основаны на текущей цветовой схеме.

Размещено у нас? Компоненты тем доступны для использования на наших планах Standard, Business и Enterprise.