Submenus do cabeçalho

[Discourse]

	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

Como este é um #componente de tema #oficial mantido pela equipe do Discourse, solicitações de #suporte, Contribute > Bug, Contribute > UX e Contribute > Feature podem ser feitas nas categorias respectivas aqui no Meta, e marcadas com a tag apropriada do componente de tema. Clique em um dos links abaixo para começar.

 Suporte  Bug  UX  Recurso

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

1. 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ção

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

   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vdm aparece tanto no desktop quanto no mobile
   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vdo aparece apenas no desktop,
   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vmo aparece apenas no mobile.

   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 delimitado por vírgula por linha nesta ordem

   Pai, texto, ícone, URL, destino, 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 aponta. Você também pode usar caminhos relativos.
   Destino: Escolha se este item abrirá 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 quando o item é passado o mouse.
   Divisores: Você também pode adicionar divisores entre os itens do submenu. Para adicionar um divisor, 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

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.

3. Opções de layout.

   São bastante autoexplicativas

   

4. 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.

[Johani (Joe)]

Acabei de empurrar uma atualização para este componente.

DEV: v2 (#8)

Não há mudanças visuais e, se você adicionou CSS personalizado ao seu tema, ele ainda deve funcionar, pois o componente mantém as mesmas classes.

Removi a biblioteca externa que o componente usava anteriormente e, por consequência, o jQuery. Analisei os problemas relatados aqui, corrigi os que pude reproduzir e depois excluí as respostas para manter tudo organizado. Se o seu problema persistir após a atualização, sinta-se à vontade para postar novamente.

Além disso, a atualização adiciona apenas um novo recurso: os submenus agora aparecerão ao passar o mouse no desktop, em vez de exigir um clique.

[davidkingham]

Ótima atualização, Joe! Enfrentei apenas dois problemas no celular.

1. Você não pode mais rolar lateralmente se tiver muitos itens de menu.
2. Ao tocar em um item no menu suspenso, ele permanece aberto.

[Johani (Joe)]

@davidkingham

Você não consegue mais rolar lateralmente se tiver muitos itens de menu.

Isso deveria ainda funcionar, mas apenas na visualização móvel. Então, se você testar apenas na visualização móvel simulada do navegador sem alterar o agente do usuário, não funcionará. Pode confirmar que está testando isso em um telefone real? Se sim, pode me informar qual dispositivo/navegador você está usando?

@davidkingham

Ao tocar em um item no menu suspenso, o menu permanece aberto

Eu também vejo isso. O motivo é que todo o comportamento de abertura/fechamento do menu suspenso agora é tratado com CSS em vez de JavaScript. Acredito que o CSS não tenha uma maneira de lidar com o fechamento automático do menu suspenso após clicar nele. Portanto, precisamos recorrer ao JS para esse problema específico. Farei isso depois que você confirmar o problema de rolagem no móvel.

[davidkingham]

Isso está acontecendo em um iPhone 8 com o aplicativo Discourse, e o mesmo ocorre no Safari. Obrigado, Joe!

[davidkingham]

Alguma atualização sobre isso, Joe? Obrigado!

[fidelio]

No site da comunidade Sponge, eles têm uma integração agradável disso no cabeçalho principal, em vez de uma camada extra no topo:

Sponge Forums

Como isso pode ser feito? Adoraríamos ter isso em nosso site.

[AntiMetaman]

É possível adicionar submenus aos links do cabeçalho? Este componente do tema adiciona um novo menu acima do cabeçalho, mas algumas pessoas não desejam um novo menu de navegação. Elas apenas querem a capacidade de passar o mouse sobre os links atuais do cabeçalho e exibir submenus.

[Hugh_Roberts]

Isso é legal. Eu me pergunto como eles fizeram isso.

[ElForoViajero]

Alguém está tendo esse problema? Os ícones das redes sociais não estão funcionando (estavam) e, mesmo usando uma fonte FA diferente, eles não aparecem.

[davidkingham]

Você já tentou o prefixo fab, já que, como são marcas, elas precisam ter esse prefixo.

[ElForoViajero]

Obrigado pela sua resposta @davidkingham. Adicionei o prefixo fab, mas o logotipo não aparece.

[Steven]

Não se esqueça de editar os ícones na lista de links também; você deve incluir o prefixo fab- nesses.

[ElForoViajero]

Bingo! Foi isso mesmo muito obrigado!

[Sentinelrv]

Olá, não tenho certeza do motivo, mas a configuração “Menu-item-active-background” não parece estar funcionando corretamente. Acredito que ela deveria apenas alterar a cor de fundo do menu ao passar o mouse, mas a cor selecionada está cobrindo completamente o texto. Veja aqui…

Além disso, a configuração abaixo, “Menu-item-active-color”, também não parece estar fazendo nada. Tentei diferentes códigos de cor, mas nada muda quando vou testar.

Alguma ideia?

[Moksh]

Gostaria de colocar os submenus abaixo do cabeçalho do site em vez de no topo. Você poderia me dizer como fazer isso? Um trecho de código seria muito útil

[Moksh]

@Johani

@davidkingham

1. Ao tocar em um item no menu suspenso, ele permanece aberto

Eu também vejo isso. O motivo é que todo o comportamento de abertura/fechamento do menu suspenso agora é tratado com CSS em vez de JavaScript. Não acho que o CSS tenha uma maneira de lidar com o fechamento automático do menu após clicar nele. Então, temos que recorrer ao JS para esse problema específico. Farei isso depois que você confirmar o problema de rolagem no celular.

@Johani @davidkingham Vocês encontraram uma solução para o problema “Ao tocar em um item no menu suspenso, ele permanece aberto”?

Obrigado

[davidkingham]

Não, ainda está se comportando assim. Uma solução possível é mostrar apenas os ícones no mobile, sem texto. O que você acha?

[Moksh]

Como mostrar apenas ícones no mobile resolve o problema? “Ao tocar em um item no menu suspenso, ele permanece aberto”

[Moksh]

@ElForoViajero Seus submenus parecem funcionar bem tanto no desktop quanto no mobile. Assim que você clica no item do menu, a tela é atualizada e o menu se fecha automaticamente. Você teve que fazer algo especial?