ディスコースヘッダーにドロップダウンメニューを追加する方法

サポート
1

Discourse のプラグイン API コンポーネントを使用して、ヘッダーメニューを追加しました。しかし、それらのヘッダーにドロップダウンメニューを追加する方法がわかりません。

Discourse API プラグインやその他の方法で、Discourse のヘッダーにドロップダウンメニューを追加することは可能でしょうか？

期待される出力は以下の通りです。

Discourseheaders
Discourseheaders699×188 15.5 KB

2

このテーマコンポーネントをご覧になることをお勧めします：https://meta.discourse.org/t/header-submenus/94584。これにより、サブメニュー付きのヘッダーメニューを作成できます。このコンポーネントをそのまま使用するか、独自のコンポーネントを作成する方法のサンプルコードとして参照することもできます。

「いいね！」 2
3

テーマコンポーネントを確認しました。

ヘッダーとサブメニューが Discourse のヘッダーの前に追加されています。実際には、以下のマークをした Discourse ヘッダーにヘッダーとサブメニューを追加していただくことを想定しています。

HeaderSubmenu
HeaderSubmenu552×232 17.9 KB

4

この問題は、Discourse プラグイン API イベントを使用したカスタム HTML の挿入によって解決しました。

まず、「Custom Header Links」コンポーネントをインストールし、通常通りヘッダーを設定します。その後、ヘッダーの DOM 要素が読み込まれた時点で、Discourse API イベントを使用してカスタム HTML をヘッダーに挿入します。以下のようなコードです。

api.onPageChange(url => {
    if ($(".header-buttons").length != 0 && i == 0) {
        $('.custom-header-links .services-custom-header-links a').append("アイコンの挿入");
        $(".header-buttons").prepend("ul タグ要素の追加");
        $(".resource-dropdown-menu").after("最初に挿入した ul 要素のクラス名を使用して次の ul 要素を追加");
        i++;
    }
});

これにより、ヘッダーの DOM にサブメニューを追加できます。ただし、配置に問題が生じる場合があります。そのため、CSS によって配置を調整する必要があります。また、サブメニューを開くためのクリック関数の実装や、ヘッダーの背景色変更などの処理も必要になります。ありがとうございました :slight_smile:

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.