メニュー

メニュー
メニューはグループ化されたナビゲーションアクションを表示します

ダウンロード

種類

メニュー

メニュー

2.0以降、メニューはフレックスボックスを使用するようになりました。これにより、各メニュー項目は最大の項目のサイズに自動的に伸縮します。

以下の例の多くは、ドロップダウンと組み合わせて、ui menu内にドロップダウンメニューを表示しています。このコンポーネントの正しいJavascript初期化については、ドロップダウンのドキュメントを参照してください。

セカンダリメニュー

メニューは、その内容を強調しないように外観を調整できます

ポインティング

メニューは、近くのコンテンツとの関係を示すためにポイントできます

表形式

メニューは、情報のタブを表示するようにフォーマットできます

動的タブの設定方法については、タブのドキュメントをご覧ください
これは引き伸ばされたグリッド列です。このセグメントは常にタブの高さに一致します
これは引き伸ばされたグリッド列です。このセグメントは常にタブの高さに一致します

テキスト

メニューはテキストコンテンツ用にフォーマットできます

垂直メニュー

垂直メニューは要素を垂直に表示します。

垂直メニューの幅はデフォルトで任意のサイズになります。コンテンツにより正確に合わせるには、ui gridと組み合わせて流動バリエーションを使用します。

ページネーション

ページネーションメニューは、コンテンツのページへのリンクを表示するために特別にフォーマットされています

コンテンツ

ヘッダー

メニュー項目にはヘッダーが含まれている場合や、それ自体がヘッダーである場合があります

入力

メニュー項目には、入力を含めることができます

ボタン

メニュー項目には、ボタンを含めることができます

リンクアイテム

メニューには、リンクアイテム、またはリンクのようにフォーマットされたアイテムを含めることができます。

ドロップダウンアイテム

アイテムには、ドロップダウンにネストされたメニューが含まれている場合があります。

Javascriptなしでドロップダウンを開くには、simpleバリエーションを使用します

検索

メニューには、検索入力を含めることができます

メニュー

メニューには、メニュー項目と同じレベルの別のメニューグループが含まれている場合があります。

サブメニュー

メニュー項目には、グループ化されたサブメニューとして機能する別のメニューがネストされている場合があります。

状態

ホバー

メニュー項目にホバーできます

メニュー項目は、aリンクであるか、クラス名linkが指定されている場合にのみホバーできます

アクティブ

メニュー項目をアクティブにすることができます

バリエーション

固定

メニューはコンテキストの側に固定できます

これらの例では、コンテンツがブラウザのビューポートに固定されないようにするために、iframeを使用しています。
より高度な動作については、スティッキーメニューまたは可視性APIの使用を検討してください。

スタッカブル

メニューはモバイル解像度でスタックできます

スタッカブルメニューは、単純なメニューコンテンツでのみ使用することを目的としています。スタックされたメニューは、ドロップダウンの位置調整など、垂直メニューのすべての追加スタイルを複製しません。

反転

コントラストを高めるために、メニューの色を反転させることができます

色付き

追加の色を指定できます。

これらの色も反転させることができます

アイコン

メニューにはアイコンのみが含まれている場合があります



ラベル付きアイコン

メニューにはラベル付きアイコンが含まれている場合があります



流動

垂直メニューは、コンテナのサイズに合わせて調整できます。(水平メニューはデフォルトでこのようになります)

コンパクト

メニューは、コンテンツに合わせて必要なスペースだけを占有します

均等分割

メニューは、項目を均等に分割できます

垂直メニューは、所有権を示すために、隣接するコンテンツを指すことができます

添付

メニューは他のコンテンツセグメントに添付できます

多数のバリエーションのLorem Ipsumが存在しますが、大半はユーモアを挿入したり、ランダムな単語を追加したりするなど、何らかの形で変更が加えられています。そのため、信憑性に欠けるものとなっています。Lorem Ipsumを使用する場合は、テキストの途中に恥ずかしいものが隠されていないことを確認する必要があります。インターネット上のすべてのLorem Ipsumジェネレーターは、必要に応じて定義済みのチャンクを繰り返す傾向があるため、これはインターネット上で最初の真のジェネレーターとなっています。200以上のラテン語の単語と、少数のモデル文構造を組み合わせて、合理的に見えるLorem Ipsumを生成します。そのため、生成されたLorem Ipsumは、繰り返し、挿入されたユーモア、または特徴のない単語などがありません。
多数のバリエーションのLorem Ipsumが存在しますが、大半はユーモアを挿入したり、ランダムな単語を追加したりするなど、何らかの形で変更が加えられています。そのため、信憑性に欠けるものとなっています。Lorem Ipsumを使用する場合は、テキストの途中に恥ずかしいものが隠されていないことを確認する必要があります。インターネット上のすべてのLorem Ipsumジェネレーターは、必要に応じて定義済みのチャンクを繰り返す傾向があるため、これはインターネット上で最初の真のジェネレーターとなっています。200以上のラテン語の単語と、少数のモデル文構造を組み合わせて、合理的に見えるLorem Ipsumを生成します。そのため、生成されたLorem Ipsumは、繰り返し、挿入されたユーモア、または特徴のない単語などがありません。

サイズ

メニューはサイズを変更できます

垂直メニューもサイズを変更できます

項目

フィット

メニュー項目またはメニューは、要素のパディングを垂直方向または水平方向に削除できます

ボーダーレス

メニュー項目またはメニューは、境界線なしにできます

ディマーメッセージ
ディマーサブヘッダー