 |
概要 | Header Submenus を使用すると、プレーンテキストでサブメニュー付きのヘッダーメニューを作成できます！ |
 |
プレビュー | Discourse Theme Creator でのプレビュー |
 |
リポジトリリンク | https://github.com/discourse/discourse-header-submenus |
 |
Discourse Themes 初心者の方へ | Discourse Themes の使用に関する初心者ガイド |
このテーマコンポーネントをインストール
機能
デスクトップ
モバイル
設定
| 名前 | 説明 |
|---|---|
| メニュー項目 | メニュー項目を追加します。各行に 1 つの項目を以下の順序で入力します：テキスト、アイコン、タイトル、表示デバイス。 |
| サブメニュー項目 | サブメニュー項目を追加します。各行に 1 つの項目を以下の順序で入力します：親、テキスト、アイコン、URL、ターゲット、タイトル。 |
| SVG アイコン | 上記のリストで使用される各アイコンの FontAwesome アイコンクラスを含めます。 |
| 固定モード | スクロール位置に関係なく、メニューを画面の上部に表示させます - デスクトップのみ |
| キャレットを表示 | メニュー項目の隣にキャレットアイコンを表示します |
| 位置を反転 | メニュー項目を画面の反対側に表示します |
| メニューの背景 | メニューの背景色。 (16 進数、rgb、rgba、または CSS の色名) |
| メニュー項目の色 | メニュー項目の色。 (16 進数、rgb、rgba、または CSS の色名) |
| メニュー項目（アクティブ）の背景 | アクティブなメニュー項目の背景色。 (16 進数、rgb、rgba、または CSS の色名) |
| メニュー項目（アクティブ）の色 | アクティブなメニュー項目の色。 (16 進数、rgb、rgba、または CSS の色名) |
| サブメニューの背景 | サブメニューの背景色。 (16 進数、rgb、rgba、または CSS の色名) |
| サブメニュー項目の色 | サブメニュー項目の色。 (16 進数、rgb、rgba、または CSS の色名) |
| サブメニュー項目（ホバー時）の背景 | サブメニュー項目をマウスオーバーしたときの背景色。 (16 進数、rgb、rgba、または CSS の色名) |
| サブメニュー項目（ホバー時）の色 | サブメニュー項目をマウスオーバーしたときの文字色。 (16 進数、rgb、rgba、または CSS の色名) |
| 区切りの色 | サブメニュー内の区切り線の色。 (16 進数、rgb、rgba、または CSS の色名) |
設定は 4 つのグループに分かれています
-
メニュー項目
メニューに表示したい項目を入力します。各行にカンマ区切りの項目を以下の順序で入力します
テキスト, アイコン, タイトル, 表示デバイステキスト: メニューに表示されるテキスト。
アイコン: 項目の隣に表示されるアイコン。アイコンを使用したくない場合はnoneを使用します。
タイトル: 項目にマウスを合わせたときに表示されるテキスト。
表示デバイス: 項目を表示するデバイスを選択します。
vdmはデスクトップとモバイルの両方に表示されます
vdoはデスクトップのみに表示されます
vmoはモバイルのみに表示されますスペースの制約があるため、モバイルに 3〜4 個以上の項目を追加することは推奨されません。
-
サブメニュー項目
メニューに追加したいサブメニュー項目のリストを入力します。各行にカンマ区切りの項目を以下の順序で入力します
親, テキスト, アイコン, URL, ターゲット, タイトル親: このサブメニュー項目を表示する親メニュー項目の名前。上記のリストから
textの値を使用します。
テキスト: このサブメニュー項目に表示されるテキスト。
アイコン: このサブメニュー項目のアイコン。アイコンが必要ない場合はnoneを使用します。
URL: このメニュー項目がリンクするパス。相対パスも使用できます。
ターゲット: この項目が新しいタブで開くか、同じタブで開くかを選択します。新しいタブでリンクを開くにはblankを、同じタブで開くにはselfを使用します。
タイトル: 項目にマウスを合わせたときに表示されるテキスト。
区切り: サブメニュー項目の間に区切り線を追加することもできます。区切り線を追加するには親, dividerを使用します。
上記の 1 と 2 をカバーする簡単な例を以下に示します：
Design というメニュー項目を追加し、そのサブメニューにいくつかの項目を追加したいとします
まず、これを menu_item として入力します
Design, magic, Get inspired!, vdm
次に、これらを sub_menu 項目として入力します
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!
これで完了です！
テーマにはデフォルトでプレースホルダーメニューが付属しているため、それを参照し、質問があればお知らせください。
-
レイアウトオプション
これらは非常に自己説明的です
-
カラーオプション
これらはデフォルトで空ですが、ここに色を追加すると、現在のカラースキームに基づいたコンポーネントのデフォルト値が上書きされます。
ホスティングサービスをご利用ですか？ テーマコンポーネントは、Standard、Business、Enterprise プランでご利用いただけます。
ありがとうございます！
