Submenus do Cabeçalho

[Discourse]

	Resumo	Submenus do Cabeçalho permitem criar um menu de cabeçalho com submenus usando apenas texto!
	Pré-visualização	Pré-visualizar no Discourse Theme Creator
	Link do Repositório	https://github.com/discourse/discourse-header-submenus
	Novo em Temas do Discourse?	Guia para iniciantes sobre o uso de Temas do Discourse

Instale este componente de tema

Como este é um componente de tema #oficial mantido pela equipe do Discourse, solicitações de #suporte, #bugs, ux e #funcionalidades podem ser feitas nas respectivas categorias aqui no Meta, e devem ser marcadas com a tag adequada do componente de tema. Clique em um link abaixo para iniciar uma.

 Suporte  Bug  UX  Funcionalidade

Funcionalidades

Desktop

Mobile

Configurações

Nome	Descrição
Itens do menu	Adicione itens ao menu. Um item por linha nesta ordem: Texto, ícone, título, visualização.
Itens do submenu	Adicione itens ao submenu. Um item por linha nesta ordem: Pai, texto, ícone, URL, alvo, título.
Ícones SVG	Inclua classes de ícones FontAwesome para cada ícone usado nas listas acima.
Modo fixo	Force o menu a permanecer visível no topo da tela, independentemente da posição de rolagem - Apenas Desktop
Mostrar seta	Exibir ícones de seta ao lado dos itens do menu
Inverter posição	Exibir itens do menu no lado oposto da tela
Fundo do menu	Cor de fundo do menu. (hex, rgb, rgba ou nome de cor CSS)
Cor do item do menu	Cor dos itens do menu. (hex, rgb, rgba ou nome de cor CSS)
Menu-item-active-background	Cor de fundo dos itens do menu quando ativos. (hex, rgb, rgba ou nome de cor CSS)
Menu-item-active-color	Cor dos itens do menu quando ativos. (hex, rgb, rgba ou nome de cor CSS)
Fundo do submenu	Cor de fundo dos submenus. (hex, rgb, rgba ou nome de cor CSS)
Cor do item do submenu	Cor dos itens do submenu. (hex, rgb, rgba ou nome de cor CSS)
Fundo ao passar o mouse no item do submenu	Cor de fundo dos itens do submenu ao passar o mouse. (hex, rgb, rgba ou nome de cor CSS)
Cor ao passar o mouse no item do submenu	Cor dos itens do submenu ao passar o mouse. (hex, rgb, rgba ou nome de cor CSS)
Cor do separador	Cor das linhas separadoras nos submenus. (hex, rgb, rgba ou nome de cor CSS)

Existem quatro grupos de configurações

1. Itens do menu

   Insira os itens que deseja que apareçam no menu. Um item separado por vírgula por linha nesta ordem

   Texto, ícone, título, visualização

   Texto: o que aparece no menu.
   Ícone: o ícone exibido ao lado do item. Se não desejar usar um ícone, use none.
   Título: o texto que aparece ao passar o mouse sobre o item.
   Visualização: Escolha em quais dispositivos o item aparecerá.

   vdm aparece tanto no desktop quanto no mobile
   vdo aparece apenas em desktops,
   vmo aparece apenas em mobiles.

   Devido à falta de espaço, não é recomendado adicionar mais de 3-4 itens no mobile.

2. Itens do submenu

   Insira uma lista dos itens do submenu que deseja adicionar ao seu menu. Um item separado por vírgula por linha nesta ordem

   Pai, texto, ícone, URL, alvo, título

   Pai: o nome do item do menu pai sob o qual este item do submenu deve aparecer. Use o valor texto da lista acima.
   Texto: o texto que aparece para este item do submenu.
   Ícone: o ícone para este item do submenu; use none se nenhum ícone for necessário.
   URL: o caminho para o qual este item do menu leva. Você também pode usar caminhos relativos.
   Alvo: Escolha se este item será aberto em uma nova aba ou na mesma aba. Use blank para abrir o link em uma nova aba, ou use self para abri-lo na mesma aba.
   Título: o texto que aparece ao passar o mouse sobre o item.
   Separadores: Você também pode adicionar separadores entre itens do submenu. Para adicionar um separador, use pai, divider.

Aqui está um exemplo rápido para cobrir os pontos 1 e 2 acima:

Digamos que eu queira adicionar um item de menu chamado Design e adicionar alguns itens ao seu submenu assim

Primeiro, eu inseriria isso como um menu_item

Design, magic, Get inspired!, vdm

E então inseriria estes como itens 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!

É isso!

O tema vem com um menu de exemplo por padrão, então dê uma olhada nele e pergunte se tiver dúvidas.

3. Opções de layout.

   Estas são bastante autoexplicativas

   

4. Opções de cor

   Estas estão vazias por padrão, mas se você adicionar uma cor aqui, ela substituirá os padrões do componente, que são baseados no esquema de cores atual.

Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.