Header-Untermenüs

[Discourse]

	Zusammenfassung	Header-Untermenüs ermöglichen es Ihnen, ein Header-Menü mit Untermenüs in reinem Text zu erstellen!
	Vorschau	Vorschau im Discourse Theme Creator
	Repository-Link	https://github.com/discourse/discourse-header-submenus
	Neu bei Discourse Themes?	Anfängerleitfaden zur Verwendung von Discourse Themes

Dieses Theme-Komponente installieren

Da dies eine #offizielle Theme-Komponente ist, die vom Discourse-Team gewartet wird, können #Support-, #Bug-, #UX- und #Feature-Anfragen in den jeweiligen Kategorien hier auf Meta gestellt und mit dem entsprechenden Theme-Komponenten-Tag versehen werden. Klicken Sie auf einen der folgenden Links, um einen neuen Beitrag zu starten.

 Support  Bug  UX  Feature

Funktionen

Desktop

Mobil

Einstellungen

Name	Beschreibung
Menüpunkte	Menüpunkte hinzufügen. Ein Punkt pro Zeile in dieser Reihenfolge: Text, Icon, Titel, Ansicht.
Untermenüpunkte	Untermenüpunkte hinzufügen. Ein Punkt pro Zeile in dieser Reihenfolge: Übergeordnet, Text, Icon, URL, Ziel, Titel.
Svg-Icons	FontAwesome-Icon-Klassen für jedes in den obigen Listen verwendete Icon einfügen.
Fixierter Modus	Erzwingt, dass das Menü unabhängig von der Scroll-Position oben auf dem Bildschirm sichtbar bleibt – Nur Desktop
Pfeil anzeigen	Pfeil-Icons neben Menüpunkten anzeigen
Position umkehren	Menüpunkte auf der gegenüberliegenden Seite des Bildschirms anzeigen
Menühintergrund	Hintergrundfarbe für das Menü. (hex, rgb, rgba oder CSS-Farbbezeichnung)
Menüpunktfarbe	Farbe für Menüpunkte. (hex, rgb, rgba oder CSS-Farbbezeichnung)
Menüpunkt-aktiv-Hintergrund	Hintergrundfarbe für Menüpunkte, wenn aktiv. (hex, rgb, rgba oder CSS-Farbbezeichnung)
Menüpunkt-aktiv-Farbe	Farbe für Menüpunkte, wenn aktiv. (hex, rgb, rgba oder CSS-Farbbezeichnung)
Untermenühintergrund	Hintergrundfarbe für Untermenüs. (hex, rgb, rgba oder CSS-Farbbezeichnung)
Untermenüpunktfarbe	Farbe für Untermenüpunkte. (hex, rgb, rgba oder CSS-Farbbezeichnung)
Untermenüpunkt-Hover-Hintergrund	Hintergrundfarbe für Untermenüpunkte beim Hover. (hex, rgb, rgba oder CSS-Farbbezeichnung)
Untermenüpunkt-Hover-Farbe	Farbe für Untermenüpunkte beim Hover. (hex, rgb, rgba oder CSS-Farbbezeichnung)
Trennlinienfarbe	Farbe für Trennlinien in Untermenüs. (hex, rgb, rgba oder CSS-Farbbezeichnung)

Es gibt vier Gruppen von Einstellungen

1. Menüpunkte

   Geben Sie die Punkte ein, die im Menü erscheinen sollen. Ein durch Komma getrennter Punkt pro Zeile in dieser Reihenfolge

   Text, Icon, Titel, Ansicht

   Text: Was im Menü angezeigt wird.
   Icon: Das Icon, das neben dem Punkt angezeigt wird. Wenn Sie kein Icon verwenden möchten, verwenden Sie none.
   Titel: Der Text, der beim Hover über den Punkt angezeigt wird.
   Ansicht: Wählen Sie, auf welchen Geräten der Punkt angezeigt wird.

   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vdm erscheint sowohl auf Desktop als auch auf Mobilgeräten
   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vdo erscheint nur auf Desktops,
   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vmo erscheint nur auf Mobilgeräten.

   Aufgrund des begrenzten Platzes wird empfohlen, auf Mobilgeräten nicht mehr als 3-4 Punkte hinzuzufügen.

2. Untermenüpunkte

   Geben Sie eine Liste der Untermenüpunkte ein, die Sie zu Ihrem Menü hinzufügen möchten. Ein durch Komma getrennter Punkt pro Zeile in dieser Reihenfolge

   Übergeordnet, Text, Icon, URL, Ziel, Titel

   Übergeordnet: Der Name des übergeordneten Menüpunkts, unter dem dieser Untermenüpunkt angezeigt werden soll. Verwenden Sie den Text-Wert aus der obigen Liste.
   Text: Der Text, der für diesen Untermenüpunkt angezeigt wird.
   Icon: Das Icon für diesen Untermenüpunkt; verwenden Sie none, wenn kein Icon benötigt wird.
   URL: Der Pfad, zu dem dieser Menüpunkt verlinkt. Sie können auch relative Pfade verwenden.
   Ziel: Wählen Sie, ob dieser Punkt in einem neuen Tab oder im gleichen Tab geöffnet wird. Verwenden Sie blank, um den Link in einem neuen Tab zu öffnen, oder self, um ihn im gleichen Tab zu öffnen.
   Titel: Der Text, der beim Hover über den Punkt angezeigt wird.
   Trennlinien: Sie können auch Trennlinien zwischen Untermenüpunkten hinzufügen. Um eine Trennlinie hinzuzufügen, verwenden Sie parent, divider.

Hier ein kurzes Beispiel, um die Punkte 1 und 2 abzudecken:

Nehmen wir an, ich möchte einen Menüpunkt namens Design hinzufügen und ein paar Punkte zu seinem Untermenü hinzufügen, wie folgt:

Ich würde dies zuerst als menu_item eingeben:

Design, magic, Get inspired!, vdm

Und dann diese als sub_menu-Punkte eingeben:

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!

Das war’s!

Das Theme wird standardmäßig mit einem Platzhalter-Menü geliefert, also werfen Sie einen Blick darauf und fragen Sie, wenn Sie Fragen haben.

3. Layout-Optionen.

   Diese sind ziemlich selbsterklärend

   

4. Farboptionen

   Diese sind standardmäßig leer, aber wenn Sie hier eine Farbe hinzufügen, überschreibt sie die Standards des Components, die auf dem aktuellen Farbschema basieren.

Von uns gehostet? Theme-Komponenten können in unseren Standard-, Business- und Enterprise-Plänen verwendet werden.

[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]

Any update on this Joe? Thanks!

[fidelio]

Over at the Sponge community site they have a nice integration of this in the main header instead of an extra layer at the top:

Sponge Forums

How can this be achieved? Would love it for our site.

[AntiMetaman]

Can submenus be possible to header links? This theme component adds a new menu above the header, but some people don’t want a new navigation menu. They just want ability to hover over the current header links and have submenus.

[Hugh_Roberts]

That is nice. I wonder how they did it.

[ElForoViajero]

is someone having this issue? the social networks icons are not working (they were) and even using a different fa it won’t show.

[davidkingham]

Have you tried the prefix of fab, since these are brands they need to have this prefix.

[ElForoViajero]

thansk for you reply @davidkingham I added the prefix fab, but the logo doesn’t appear.

[Steven]

Don’t forget to edit the icons in the list of links also, you must include fab- prefix in these

[ElForoViajero]

Bingo! that was it thanks a lot!

[Sentinelrv]

Hi, I’m not sure why but the setting “Menu-item-active-background” doesn’t seem to be working right. I believe it should just change the background color of the menu when I hover, however the selected color is completely covering up the text. See here…

Also, the setting below it " Menu-item-active-color" doesn’t seem to do anything. I’ve tried different color codes and nothing changes when I go to test it.

Any ideas?

[Moksh]

I would like to place the submenus below the site header instead of top. Could you please tell me how to do this? A code snippet would help

[Moksh]

@Johani

@davidkingham

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

@Johani @davidkingham Did you find a solution for this problem “When you tap an item in the dropdown, the dropdown stays open” ?

Thank you

[davidkingham]

No it’s still behaving this way, one potential solution is to show only icons on mobile with no text, thoughts?

[Moksh]

How showing just icons on mobile solves the problem? "When you tap an item in the dropdown, the dropdown stays open”

[Moksh]

@ElForoViajero Your submenus seem to work okay on both desktop and mobile. As soon as you click the item in the menu, the screen refreshes and the menu closes automatically. Did you have to do something special?

El Foro Viajero