 |
Resumo | Header Submenus permitirá que você crie um menu de cabeçalho - com submenus - usando texto simples! |
 |
Pré-visualização | Pré-visualização no Discourse Theme Creator |
 |
Link do Repositório | https://github.com/discourse/discourse-header-submenus |
 |
Novo nos Temas do Discourse? | Guia para iniciantes sobre como usar Temas do Discourse |
Instale este componente de tema
Recursos
Desktop
Mobile
Configurações
| Nome | Descrição |
|---|---|
| Itens do menu | Adicione itens do menu. Um item por linha nesta ordem: Texto, ícone, título, visualização. |
| Itens do submenu | Adicione itens do submenu. Um item por linha nesta ordem: Pai, texto, ícone, URL, destino, título. |
| Ícones SVG | Inclua as classes de ícone do FontAwesome para cada ícone usado nas listas acima. |
| Modo fixo | Forçar a visibilidade do menu no topo da tela, independentemente da posição de rolagem - Apenas Desktop |
| Mostrar seta | Mostrar ícones de seta ao lado dos itens do menu |
| Inverter posição | Exibir os itens do menu no lado oposto da tela |
| Fundo do menu | Cor de fundo do menu. (hex, rgb, rgba ou nome da cor CSS) |
| Cor do item do menu | Cor dos itens do menu. (hex, rgb, rgba ou nome da cor CSS) |
| Fundo do item do menu ativo | Cor de fundo dos itens do menu quando ativos. (hex, rgb, rgba ou nome da cor CSS) |
| Cor do item do menu ativo | Cor dos itens do menu quando ativos. (hex, rgb, rgba ou nome da cor CSS) |
| Fundo do submenu | Cor de fundo dos submenus. (hex, rgb, rgba ou nome da cor CSS) |
| Cor do item do submenu | Cor dos itens do submenu. (hex, rgb, rgba ou nome da cor CSS) |
| Fundo do item do submenu ao passar o mouse | Cor de fundo dos itens do submenu ao passar o mouse. (hex, rgb, rgba ou nome da cor CSS) |
| Cor do item do submenu ao passar o mouse | Cor dos itens do submenu ao passar o mouse. (hex, rgb, rgba ou nome da cor CSS) |
| Cor do divisor | Cor das linhas divisoras nos submenus. (hex, rgb, rgba ou nome da cor CSS) |
Existem quatro grupos de configurações
-
Itens do menu
Insira os itens que deseja que apareçam no menu. Um item delimitado por vírgula por linha nesta ordem
Texto, ícone, título, visualizaçãoTexto: o que aparece no menu.
Ícone: o ícone exibido ao lado do item. Se você não quiser usar um ícone, usenone.
Título: o texto que aparece quando o item é passado o mouse.
Visualização: Escolha em quais dispositivos o item aparecerá.
vdmaparece tanto no desktop quanto no mobile
vdoaparece apenas no desktop,
vmoaparece apenas no mobile.Devido à falta de espaço, não é recomendado adicionar mais de 3-4 itens no mobile.
-
Itens do submenu
Insira uma lista dos itens do submenu que deseja adicionar ao seu menu. Um item delimitado por vírgula por linha nesta ordem
Pai, texto, ícone, URL, destino, títuloPai: o nome do item do menu pai sob o qual este item do submenu deve aparecer. Use o valor
textoda lista acima.
Texto: o texto que aparece para este item do submenu.
Ícone: o ícone para este item do submenu, usenonese nenhum ícone for necessário.
URL: o caminho para o qual este item do menu aponta. Você também pode usar caminhos relativos.
Destino: Escolha se este item abrirá em uma nova aba ou na mesma aba. Useblankpara abrir o link em uma nova aba, ou useselfpara abri-lo na mesma aba.
Título: o texto que aparece quando o item é passado o mouse.
Divisores: Você também pode adicionar divisores entre os itens do submenu. Para adicionar um divisor, usepai, 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
Eu primeiro inseriria isso como um menu_item
Design, magic, Get inspired!, vdm
E então inseriria estes como itens de 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 espaço reservado por padrão, então dê uma olhada nele e pergunte se tiver dúvidas.
-
Opções de layout.
São bastante autoexplicativas
-
Opções de cor
Elas 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? Os componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.