ヘッダーのサブメニュー

申し訳ありません、あなたのコメントを完全に読みませんでした。私が抱えている横スクロールの問題について考えていました。

「いいね!」 2

特別なことは何もしていません。何が問題ですか?

「いいね!」 1

メニュー内の項目をタップすると、メニューが開いたままになり、ページが更新されます。メニューからフォーカスが外れると、メニューは消えます。この動作は、画面が小さくメニューが自動的に閉じないため、ページの内容が見えにくいモバイル端末でより顕著に現れます。

サブメニューの最新バージョンを使用していますか?

「いいね!」 1

旧バージョンのサブメニューにはこの問題がないようですが、新しいバージョンほど洗練されていません。サブメニューをクリックしてもメニューが自動的に閉じないというバグを解消したい場合は、GitHub のこの古いフォークを使用してください。

「いいね!」 1

このコンポーネントは素晴らしく、少し CSS を調整することで結果に大変満足しています。作成してくださりありがとうございます。

ただ、一つ大きな課題があります。メニューが設定された後、新しい項目を追加するのが非常に難しい点です。

個々のテキストフィールドを単一の大きなフィールドに置き換えるプルリクエストがあったのを見かけましたが、それははるかに理にかなっていると思います。

別の代替案として、設定のインポート/エクスポート機能を実装する方法もあります(これはテーマコンポーネントではなく、Discourse 側で対応が必要なものかもしれません。確信はありませんが)。もしそれが可能なら、テキストエディタで変更を加えてアップロードすることもでき、バックアップも容易になります。

(コンポーネントの設定 UI の下部にある「エクスポート」ボタンがこれを担当しているかと思ったのですが、どうやらコンポーネントのソースコードとデフォルト設定のみを保存するようで、ユーザー独自の設定は保存されていないようです。)

それはさておき、このコンポーネントは非常に優れており、ユーザーと管理者の両方が素早く目的の場所を見つけられるよう、フォーラムの上部に頻繁に必要となるリンクを多数追加できるようになりました。

「いいね!」 4

コミュニティの開発者によるこのフォークには、メニューとサブメニュー項目を追加するための大きなテキストエリアが1つあります。古いバージョンですが、私たちが求める機能を提供してくれています。

「いいね!」 3

@Canapinのフォークは[PAID] Header Submenus UI modification に基づいています。私たちも、これで必要な機能が実現できていると考えています。

ただし、サブメニューのテキストをボックス内で直接編集しようとはしないでください。メニューはCSVファイルで管理しており、スタッフ向けハウツートピックに記載されている以下の手順に従っています。

  • スプレッドシートアプリでCSVファイルを開く。
  • データを編集する。一般的には、既存のパターンに従えば問題ありません。
  • CSVファイルを保存する。
  • テキストエディタでCSVファイルを開く。
  • テキストエディタからコピーし、サブメニュー項目ボックスに貼り付ける。
  • 変更を加えたCSVファイルをこのトピックにアップロードして、同期を保つ。

なお、CSV内でいくつかのHTMLタグやスペースを使用することで、より整理された構造やサブサブメニューを作成できます。これにより、スマートフォン上で多くの項目を収めることができます。

「いいね!」 5

ズームがヘッダーセクションでメニューをどのように動作させているのか気になります

「いいね!」 3

この(ドロップダウンメニュー)は、Discourseとは無関係な、単純なHTML/CSSで実現できます。ブラウザのツールを使って、kbdキーを押して実装方法を自分で確認することも可能です。

「いいね!」 4

いくつかの投稿を読んだ後、.d-header に対してリンクを追加できる唯一の方法は、このコンポーネントが追加のヘッダーを作成するのとは異なり、これに似たコンポーネントを使うことだと思いました。

ここで投稿した後、Custom Header Links のようなコンポーネントが、私の投稿 で提案されたように調整すれば、その役割を果たせるかもしれないというアイデアが浮かびました。

「いいね!」 3

最新バージョンにアップグレード後、ヘッダーのサブメニュー「固定モード」(「スクロールに関係なくメニューを常に最前面に表示する - デスクトップのみ」)が正常に動作しません。メインページでは大量の余白が追加され、他のページではヘッダーのサブメニューがメインの Discourse メニューを覆ってしまいます。これは以下の問題に関連しているのは間違いありません:

ただし、このテーマコンポーネントの CSS で d.header に絶対配置(absolute position)が設定されているようには見えません。何かご存知でしょうか?

「いいね!」 3

お使いのブラウザは何ですか?問題のスクリーンショットを共有していただけませんか?

最新の Discourse で「固定モード」を有効にし、トピックリストを下にスクロールしたときに私が確認しているのは以下の通りです:

「いいね!」 1

デスクトップ版の Chrome でも Firefox でも同じ現象が起きています。モバイル版では問題ありません。

「固定モード」なしのメインページ(通常):






「固定モード」ありのメインページには余分な空白があります:






「固定モード」なしでトピックをスクロールした場合(通常):






「固定モード」ありでトピックをスクロールした場合。ロゴ、トピックタイトル、ハンバーガーメニューがメニューに隠れています:

「いいね!」 2

他のカスタム CSS はありますか?.docked .d-header#main-outlet にパディングやマージンが設定されており、Discourse のアップデートと競合している可能性があります。

「いいね!」 4

URL のみでドロップダウンなしのメニュー項目を使用することは可能でしょうか?

「いいね!」 2

ドロップダウンが不要な場合は、Custom Header Links (icons) をおすすめします。ドラマが少なく、より統合された印象になります。ご質問の答えはわかりませんが、おそらく「いいえ」だと思います。

「いいね!」 2

現在、このプラグインを使用していますが、ヘッダーセクションに十分なスペースがないため、ドロップダウンメニューを上部に配置する予定です。ただし、トップレベルのメニューに URL を追加する必要があります。

また、「カスタムヘッダーリンク」でドロップダウンメニューを作成できませんでした。Zoom がそれを行ったようです。コンソールを通じて彼らのドロップダウンメニューを検証しましたが、このコンポーネントの HTML に干渉して任意の項目にドロップダウンを追加する方法がわかりませんでした。

「いいね!」 2

機能リクエストですが、スクロールの問題が解決できない場合、モバイル端末ではテキストを非表示にしてアイコンのみを表示するオプションは如何でしょうか?CSSでテキストのみをターゲットする方法はなさそうですし、その方法で非表示にできればと思うのですが。よろしくお願いいたします!

「いいね!」 3

こんにちは
「ヘッダーサブメニュー」コンポーネントをインストールすると、コンポーネントが表示されるものの、現在のフォーラムヘッダーと重なってしまいます。


使用している Discourse のバージョンは 2.4.1 です。

どなたか、この問題を解決する方法をご教示いただけますでしょうか。
よろしくお願いいたします。

「いいね!」 1

Discourse の更新を試しましたか?最新バージョンは 2.7.0.beta3 です。

「いいね!」 2