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.

[Johani (Joe)]

I just pushed an update to this component.

https://github.com/discourse/discourse-header-submenus/commit/cbb1c280f031024335cf3b103b0e2c242c5862b1
There are no visual changes and if you’ve added custom CSS to your theme, it should still work because the component still has the same classes.

I dropped the external library that the component previously used and jQuery by extension. I went through the issues reported here, fixed the one I could reproduce and then deleted the replies to keep everything tidy. If your problem still persists after the update, please feel free to post it.

Beyond that, the update only adds one new feature. The submenus will now show on hover on desktop instead of requiring a click.

[davidkingham]

Nice update Joe, I’ve only run into two problems on mobile.

1. You can no longer scroll side to side if you have a lot of menu items.
2. When you tap an item in the dropdown, the dropdown stays open

[Johani (Joe)]

@davidkingham

You can no longer scroll side to side if you have a lot of menu items.

This should still work, but it’s only on the mobile view. So, if you just test it the browser fake mobile view without changing the user agent, it won’t work. Can you please confirm that you’re testing this on an actual phone. If so, can you let me know what device / browser you’re using?

@davidkingham

When you tap an item in the dropdown, the dropdown stays open

I see this too. The reason is that all the dropdown (opening / closing) behaviour is now handled with CSS instead of JavaScript. I don’t think CSS has a way to handle auto closing the dropdown after you click it. So, we have to fallback to JS for that particular issue. I’ll do it after you confirm the scroll issue on mobile.

[davidkingham]

This is on an iPhone 8 with the Discourse app, same in Safari. Thanks 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?