flexboxを使用した横並びのグローバルナビゲーション

flexboxを使用して横並びのグローバルナビゲーションのメニューを作成してみます。

下記、グローバルナビゲーション部分のHTML記述です。これをHTMLのベースとして横並びのグローバルナビゲーションを作成します。classを入れていますが特に使っていません。

[HTML]

※メニューの画はリンクの範囲がどこまでなのか分かりやすいように交互にハイライトさせたものを載せます。実際はカーソルを合わせたときにハイライトされます。

メニュー左揃え

各メニューを左側によせたグローバルナビゲーションです。メニューの中の文字は中央表示となります。

[CSS]

但し、メニューのテキスト部分を<br>タグで改行を入れて2行にしてしまうと下記のようにテキストの縦が中央揃えになりません。リンクの範囲も上詰めになっていますね。各メニューすべて2行なら大丈夫です。

でもなんだかなぁ~、ですよね。ではこれも対応してみます。

ハイライトしている箇所が追加・変更箇所です。

[CSS]

自由度が上がりましたね。

次は、メニューの最後の項目だけ右側に配置してみます。

CSSに下記を追加するとできます。

[CSS]


メニュー右揃え

各メニューを右側によせたグローバルナビゲーションです。メニュー左揃えの逆ですね。

メニュー左揃えのCSSから下記ハイライト部分を変えるだけです。

[CSS]

次は、メニューの最初の項目だけ左側に配置してみます。

CSSに下記を追加するとできます。

[CSS]


メニュー中央揃え

各メニューを中央によせたグローバルナビゲーションです。

メニュー左揃えのCSSから下記ハイライト部分を変えるだけです。

[CSS]


メニュー均等配置

各メニューを均等に配置するグローバルナビゲーションです。2つのパターンがあります。

1つ目。space-between

左右両端を基準にして間にスペースが入って等間隔に配置するパターンです。

ハイライトしている箇所が変更箇所です。

[CSS]

2つ目。space-around

左右両端に均等なスペース(1/2)が入って等間隔に配置するパターンです。

ハイライトしている箇所が変更箇所です。

[CSS]

どちらも間にスペースが入る均等配置というのがもどかしいですね。余ったスペース分を各メニュー項目内に割り振りたいんだ!って方は次へ


メニュー空きスペース均等分配

各メニューのマスが同じ大きさになる訳ではなく、余ったスペースをメニューの各マス内に均等に分配して配置するって感じです。

ハイライトしている箇所を追加しています。

[CSS]

メニューの項目に改行があってもマスの中をうまく縦横中央表示させることがなかなかできなくて、正直ここにたどり着くまでトライ&エラーを繰り返しさまよい続けました(^^;

この通りメニューに改行があるものが入っていても縦横中央に表示できます。

ちなみに横幅がメニューの領域より狭い場合ですが、メニューが入らないマスで折り返して残りのマス数で同様にスペース分配されます。

レスポンシブ対応。変幻自在ですね。

メニュー Font Awesomeアイコン入れた版

最後にFont Awesomeのアイコンを入れてみたパーフェクト版でござる。(私のなかで)

アイコン、日本語、英語を縦に。こんな順番入れ替えたり、あったりなかったりのアンバランスなメニュー作成しないですがあえてやってます。(^^;

[HTML]

※Font Awesomeのアイコンが使えるように別途、データパスの設定をして下さい。

参考⇒手軽に使えるアイコン Font Awesome

[CSS]

すべての状態で縦横中央表示にできますので、これならCSSでレスポンシブ対応。スマホのときはアイコンのみとか、文字のみとか楽に制御できそうでしょ。あとは好みでカスタマイズするのみです。