⬇️ Dropdown-Header

Ja, das war mein Problem. Danke, dass Sie darauf hingewiesen haben.

in der SVG-Icon-Subset fügen Sie den Namen des Fontawesome-Icons ein, nach dem Sie suchen, und verwenden dann im Menü, in dem Sie die Schaltflächen im Header hinzufügen, die gleiche Syntax. für das Benutzersymbol müssen Sie nur “user” schreiben, zum Beispiel.

Ich konnte die Links mit diesem Skript in einem neuen Tab öffnen. Fügen Sie einfach das folgende Skript zum Abschnitt “Head” hinzu.

<script>
document.addEventListener("DOMContentLoaded", function() {
    const links = document.querySelectorAll(".custom-header-link.with-url");
    links.forEach(link => {
        link.addEventListener("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            const titles = {
                "Documentation": "Enter URL Here",
                "Downloads": "Enter URL Here",
                "Source Code": "Enter URL Here",
                "Dev Portal": "Enter URL Here",
                "Slack Channel": "Enter URL Here"
            };
            const url = titles[this.getAttribute("title")];
            if (url) {
                window.open(url, '_blank');
            }
        });
        link.setAttribute("href", "#");
    });
});
</script>

Ich hoffe, das hilft!

Ist es möglich, eine andere Ansicht zu haben, wenn der Website-Titel minimiert ist und der Thema-Titel des aktuellen Themas angezeigt wird (beim Scrollen nach unten durch ein Thema)?

Ich habe bemerkt, dass der Dropdown-Header auf breiten Bildschirmen immer noch großartig aussieht und Sinn macht, aber auf kleinen Bildschirmen nicht. Daher wäre ein display: none nützlich und wird bereits auf dem Desktop gemacht, wenn max-width: 712px.

Danke und viele Grüße. :slight_smile:

2 „Gefällt mir“

Gibt es eine Möglichkeit, nur den Dropdown-Header auf Mobilgeräten anzuzeigen?

Ich habe Folgendes versucht:

/* Standardstile – blendet die Header-Schaltflächen aus */
.header-buttons {
  display: none;
  visibility: hidden;
}

/* Media Query für Mobilgeräte */
@media screen and (max-width: 767px) {
  .header-buttons {
    display: inline; /* oder display: inline-block; je nach Layout */
    visibility: visible;
  }
}

Das funktioniert, aber alles andere, was sich im Header befindet (z. B. GitHub - discourse/discourse-header-search), wird immer noch verkleinert, als ob der Dropdown-Header noch vorhanden wäre…

Was fehlt mir?

Danke

1 „Gefällt mir“

Wahrscheinlich wird Ihre Anpassung überschrieben.
Sie benötigen visibility nicht – Sie können Folgendes tun:

.header-buttons {
  display: none !important;
}
2 „Gefällt mir“

Frage zur Verwendung der Sicherheitsfunktionen:

Wenn Sie diese Funktion verwenden, ist es möglich, mehr als eine Sicherheitsgruppe mit Zugriff auf ein Menü zu haben?

Unser Beispiel: Wir führen mehrere Bildungsprogramme durch (mit mehreren Jahren/Klassengruppen für jedes Programm), jede Klassengruppe hat ihre eigene Sicherheitsgruppe, damit wir ihnen Zugang zu den richtigen Bildungsressourcen geben können (ohne dass sie auf Ressourcen zugreifen, die für ein anderes Programm/Klassenjahr bestimmt sind), wobei jede Jahrgangsgruppe eine eindeutige Kategorie für ihre Klasse hat.

Ich muss Menüs erstellen, damit jede Klasse auf ihre Kategorie zugreifen kann, aber ich muss auch unser Bildungsteam (das nicht in der Sicherheitsgruppe für die Studenten ist) in diese Bereiche lassen.

Derzeit sehe ich nur zwei Lösungen:

  • Erstellen einer Sicherheitsgruppe, die die Mitarbeiter und jede Klasse kombiniert (ärgerlich, weil ich weniger Komplikationen bei Sicherheitsgruppen haben möchte, nicht mehr)
  • Duplizieren von Menüs, sodass es eines für die Studentengruppe und eines für die Mitarbeitergruppe gibt

Keine dieser Optionen scheint gut zu sein.

Nächste Frage: Was ist mit dem Hinzufügen von Sicherheitsfunktionen zu den Untermenüpunkten?
(Für mein Beispiel: Das würde bedeuten, dass ich ein Menü für alle verschiedenen Kurs-/Klassengruppen haben könnte und dann den Studenten nur die zutreffenden Untermenüpunkte anzeigen könnte. Während ich derzeit etwa 5-6 Hauptmenüs verwalten muss)

1 „Gefällt mir“

Ich würde Sie ermutigen, nach Alternativen zu dieser Theme Component zu suchen, da sie nicht zu Ihrem Anwendungsfall passt.

Darf ich stattdessen vorschlagen, dass Sie die Klassen-Kategorien einfach in die Standard-Site-Einstellung default_navigation_menu_categories einfügen?

Als Administrator sehen Sie alle (obwohl Sie diese Ansicht personalisieren können), aber Ihre Klassenmitglieder und Mitarbeiter sollten nur diejenigen sehen, zu denen sie im Sidebar-Menü Zugang haben.

Wenn ich Ihr Problem richtig verstehe, würde dies für Sie recht gut funktionieren.

2 „Gefällt mir“

Hallo Nathan,

Wir haben unsere Kategorien eingerichtet. Aber wir hätten auch gerne ein Menü oben auf der Seite. Die Benutzer sind mit oberen Menüs vertraut – und Communities sind bereits eine genug steile Lernkurve (wir sind nicht hier, um ein völlig neues Technikuniversum für unsere Studenten zu schaffen).

Es funktioniert auch nicht, weil wir von dem Menü aus auf externe Websites verlinken müssen (insbesondere auf unsere SharePoint-Sites, die wir verwenden, da Discourse keine strukturierte Bibliothek enthält), und Kategorien das einfach nicht können.

Ehrlich gesagt, wäre es einfacher, wenn wir mehreren Sicherheitsgruppen erlauben könnten, ein Menü anzuzeigen (auf die gleiche Weise, wie wir mehreren Sicherheitsgruppen den Zugriff auf eine Kategorie erlauben). Aber wenn es nicht möglich ist, müssen wir uns etwas anderes überlegen.

1 „Gefällt mir“

@merefield Die Höhe der Login-Buttons wird vom Dropdown-Header beeinflusst

Dies ist nur dann ein Problem, wenn für die links position die Option right verwendet wird.

2 „Gefällt mir“

Ich pflege dies nicht mehr und habe es daher als unmaintained markiert.

Sie können jedoch gerne einen PR einreichen, und ich werde ihn überprüfen. Wenn Sie persönlich nicht die Zeit oder die Fähigkeiten haben, aber möchten, dass jemand dies behebt und Budget vorhanden ist, sollten Sie im Marketplace posten.

4 „Gefällt mir“

Das verursacht auch bei mir ein Problem. Ich habe es mir angesehen, aber es ist für meine grundlegenden CSS-Hacks leider zu komplex.

3 „Gefällt mir“

Ich habe einen PR erstellt, um die Komponente zu modernisieren. (gesponsert von @davidkingham) :+1:
Unterwegs behebt er ein paar UX-Probleme, die mir aufgefallen sind.

Die Komponente könnte weiter verbessert werden. Ich werde vielleicht ein anderes Mal einen PR erstellen. Hier sind ein paar, die mir aufgefallen sind:

  • Ersetzen Sie den json_schema-Einstellungstyp durch den objects-Typ
  • Fügen Sie eine Option hinzu, um einen Link in einem neuen Tab zu öffnen
  • Bessere Barrierefreiheit
10 „Gefällt mir“

Danke @Arkshine – brillante Arbeit!

4 „Gefällt mir“

Ich sehe diesen fatalen Fehler auf einer Website, die diese Theme-Komponente verwendet :eyes:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'trim')
    at get source (custom-icon.gjs:20:24)
    ...
3 „Gefällt mir“

Oh. Ich habe einen PR erstellt, um das Problem zu beheben. Danke für die Meldung!


Gemergelt! :+1:

7 „Gefällt mir“

Großartige Komponente und exzellente Arbeit – vielen Dank für Ihre Bemühungen und Ihr Fachwissen! Mir ist aufgefallen, dass das Dropdown derzeit ein Hauptelement mit einer Ebene von Unterelementen unterstützt (z. B. Header-Element → Links). Ist es möglich, eine weitere Ebene hinzuzufügen, sodass es wie folgt funktioniert: Header-Element → Unterelement → Links?

2 „Gefällt mir“

@angus Ich habe einen PR geöffnet, um einen veralteten Font Awesome-Symbolnamen zu aktualisieren, den ich entdeckt habe:

2 „Gefällt mir“

Danke @kelv :folded_hands:

3 „Gefällt mir“

Sollte es auf Horizon funktionieren oder muss etwas geändert werden?

Dieses Plugin ist ein Muss für Communities, die einen Blog und/oder weitere zugehörige Apps haben.