Header-Untermenüs

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

Dieses Theme-Komponente installieren

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.

  1. Layout-Optionen.

    Diese sind ziemlich selbsterklärend

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


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

90 „Gefällt mir“

Ich habe gerade ein Update für diese Komponente veröffentlicht.

Es gibt keine visuellen Änderungen. Wenn du benutzerdefiniertes CSS zu deinem Theme hinzugefügt hast, sollte es weiterhin funktionieren, da die Komponente nach wie vor dieselben Klassen verwendet.

Ich habe die externe Bibliothek entfernt, die die Komponente zuvor verwendet hat, und damit auch jQuery. Ich habe die hier gemeldeten Probleme durchgegangen, dasjenige, das ich reproduzieren konnte, behoben und anschließend die Antworten gelöscht, um alles übersichtlich zu halten. Falls dein Problem nach dem Update weiterhin besteht, kannst du es gerne erneut posten.

Darüber hinaus fügt das Update nur eine neue Funktion hinzu: Die Untermenüs werden auf dem Desktop nun beim Hovern angezeigt, anstatt dass ein Klick erforderlich ist.

14 „Gefällt mir“

Schönes Update, Joe! Auf dem Handy bin ich nur auf zwei Probleme gestoßen.

  1. Wenn du viele Menüpunkte hast, kannst du nicht mehr seitwärts scrollen.
  2. Wenn du auf einen Eintrag im Dropdown klickst, bleibt das Dropdown-Menü geöffnet.
2 „Gefällt mir“

Das sollte immer noch funktionieren, aber nur in der mobilen Ansicht. Wenn du es also im Browser in der mobilen Ansicht testest, ohne den User-Agent zu ändern, wird es nicht funktionieren. Kannst du bitte bestätigen, dass du dies auf einem echten Telefon testest? Falls ja, teile mir bitte mit, welches Gerät und welchen Browser du verwendest.

Ich sehe das auch. Der Grund dafür ist, dass das gesamte Verhalten zum Öffnen und Schließen des Dropdowns jetzt mit CSS statt mit JavaScript gehandhabt wird. Ich glaube nicht, dass CSS eine Möglichkeit bietet, das Dropdown automatisch nach dem Klicken zu schließen. Daher müssen wir für dieses spezielle Problem auf JavaScript zurückgreifen. Ich werde das erledigen, sobald du das Scroll-Problem auf dem mobilen Gerät bestätigt hast.

2 „Gefällt mir“

Das passiert auf einem iPhone 8 mit der Discourse-App, genauso in Safari. Danke, Joe!

2 „Gefällt mir“

Gibt es dazu ein Update, Joe? Danke!

Auf der Sponge-Community-Website ist dies schön in die Kopfzeile integriert, anstatt als zusätzliche Ebene oben:

Wie kann das umgesetzt werden? Das würden wir gerne auch auf unserer Website haben.

4 „Gefällt mir“

Sind Untermenüs für Header-Links möglich? Diese Theme-Komponente fügt ein neues Menü über dem Header hinzu, aber einige Nutzer möchten kein neues Navigationsmenü. Sie möchten lediglich die Möglichkeit, mit der Maus über die aktuellen Header-Links zu fahren, um Untermenüs anzuzeigen.

5 „Gefällt mir“

Das ist schön. Ich frage mich, wie sie das gemacht haben.

1 „Gefällt mir“

Hat jemand dieses Problem? Die Symbole für soziale Netzwerke funktionieren nicht (sie haben es früher getan), und selbst mit einem anderen FA werden sie nicht angezeigt.

1 „Gefällt mir“

Hast du das Prefix fab ausprobiert? Da es sich um Marken handelt, müssen sie dieses Prefix haben.

1 „Gefällt mir“

Danke für deine Antwort @davidkingham. Ich habe das Präfix fab hinzugefügt, aber das Logo wird nicht angezeigt.

1 „Gefällt mir“

Vergiss nicht, die Icons in der Linkliste ebenfalls zu bearbeiten. Du musst das fab-Präfix in diesen verwenden.

4 „Gefällt mir“

Bingo! Das war’s :slight_smile: Vielen Dank!

2 „Gefällt mir“

Hallo, ich bin mir nicht sicher, warum, aber die Einstellung „Menu-item-active-background

2 „Gefällt mir“

Ich möchte die Untermenüs unter der Site-Header anstelle oben platzieren. Könntest du mir bitte sagen, wie das geht? Ein Code-Snippet wäre hilfreich :pray:

1 „Gefällt mir“

@Johani @davidkingham Habt ihr eine Lösung für dieses Problem gefunden: „Wenn du auf einen Eintrag im Dropdown klickst, bleibt das Dropdown geöffnet“?

Vielen Dank.

1 „Gefällt mir“

Nein, es verhält sich immer noch so. Eine mögliche Lösung wäre, auf Mobilgeräten nur Symbole ohne Text anzuzeigen. Was denkst du?

1 „Gefällt mir“

Wie löst das Anzeigen nur von Symbolen auf Mobilgeräten das Problem? „Wenn Sie auf einen Eintrag im Dropdown-Menü tippen, bleibt das Menü geöffnet.

1 „Gefällt mir“

@ElForoViajero Deine Untermenüs funktionieren sowohl auf dem Desktop als auch auf dem Mobilgerät gut. Sobald du auf einen Menüeintrag klickst, wird der Bildschirm aktualisiert und das Menü schließt sich automatisch. Musstest du dafür etwas Besonderes tun?

1 „Gefällt mir“