ホーム > HTML/CSS > flexboxを使用した横並びのグローバルナビゲーション

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

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

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

[HTML]

<nav id="global-nav">
    <ul>
        <li class="nav01"><a href="#">トップ</a></li>
        <li class="nav02"><a href="#">会社概要</a></li>
        <li class="nav03"><a href="#">事業内容</a></li>
        <li class="nav04"><a href="#">製品情報</a></li>
        <li class="nav05"><a href="#">アクセスマップ</a></li>
        <li class="nav06"><a href="#">お問合せ</a></li>
    </ul>
</nav>

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

メニュー左揃え

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

[CSS]（とりあえず、これは仮です。次のやつが自由度が高いと思います）

/* グローバルナビゲーション 左揃え */
#global-nav {
	background: linear-gradient(to bottom, #09f, #00a);
	background-color: #00a;
}
#global-nav ul {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
}
#global-nav li {

}
#global-nav a {
	display: block;
	text-decoration: none;
	color: #fff;
	padding: 10px 20px 10px;
}
#global-nav a:hover {
	background-color: #5af;
}

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

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

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

[CSS]

/* グローバルナビゲーション 左揃え */
#global-nav {
	background: linear-gradient(to bottom, #09f, #00a);
	background-color: #00a;
}
#global-nav ul {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
}
#global-nav li {
	display: flex;
}
#global-nav a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #fff;
	padding: 10px 20px 10px;
}
#global-nav a:hover {
	background-color: #5af;
}

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

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

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

[CSS]

#global-nav li:last-child {
	margin-left: auto;
}

メニュー右揃え

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

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

[CSS]

/* グローバルナビゲーション 右揃え */
#global-nav {
	background: linear-gradient(to bottom, #09f, #00a);
	background-color: #00a;
}
#global-nav ul {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
}
#global-nav li {
	display: flex;
}
#global-nav a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #fff;
	padding: 10px 20px 10px;
}
#global-nav a:hover {
	background-color: #5af;
}

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

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

[CSS]

#global-nav li:first-child {
	margin-right: auto;
}

メニュー中央揃え

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

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

[CSS]

/* グローバルナビゲーション 中央揃え */
#global-nav {
	background: linear-gradient(to bottom, #09f, #00a);
	background-color: #00a;
}
#global-nav ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
}
#global-nav li {
	display: flex;
}
#global-nav a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #fff;
	padding: 10px 20px 10px;
}
#global-nav a:hover {
	background-color: #5af;
}

メニュー均等配置

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

１つ目。space-between

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

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

[CSS]

/* グローバルナビゲーション 均等配置 端詰め*/
#global-nav {
	background: linear-gradient(to bottom, #09f, #00a);
	background-color: #00a;
}
#global-nav ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
}
#global-nav li {
	display: flex;
}
#global-nav a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #fff;
	padding: 10px 20px 10px;
}
#global-nav a:hover {
	background-color: #5af;
}

２つ目。space-around

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

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

[CSS]

/* グローバルナビゲーション 均等配置 左右両端スペースあり*/
#global-nav {
	background: linear-gradient(to bottom, #09f, #00a);
	background-color: #00a;
}
#global-nav ul {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
}
#global-nav li {
	display: flex;
}
#global-nav a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #fff;
	padding: 10px 20px 10px;
}
#global-nav a:hover {
	background-color: #5af;
}

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

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

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

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

[CSS]

/* グローバルナビゲーション 余ったスペース分配 */
#global-nav {
	background: linear-gradient(to bottom, #09f, #00a);
	background-color: #00a;
}
#global-nav ul {
	display: flex;
	justify-content: flex-start; /* デフォルト(なんでも) */
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
}
#global-nav li {
	flex: 1 0 auto;
	display: flex;
}
#global-nav a {
	flex: 1 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: #fff;
	padding: 10px 20px 10px;
}
#global-nav a:hover {
	background-color: #5af;
}

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

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

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

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

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

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

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

[HTML]

<nav id="global-nav">
    <ul>
        <li class="nav01">
            <a href="#">
            <i class="fa fa-home fa-size"></i>
            <span class="ja">ホーム</span><span class="en">HOME</span>
            </a>
        </li>
        <li class="nav02">
            <a href="#">
            <i class="fa fa-building fa-size"></i>
            <span class="ja">会社概要</span>
            </a>
        </li>
        <li class="nav03">
            <a href="#">
            <span class="ja">事業内容</span>
            </a>
        </li>
        <li class="nav04">
            <a href="#">
            <span class="ja">製品情報</span><span class="en">PRODUCT INFO</span>
            </a>
        </li>
        <li class="nav05">
            <a href="#">
            <span class="en">ACCESS MAP</span><span class="ja">アクセスマップ</span>
            </a>
        </li>
        <li class="nav06">
            <a href="#">
            <span class="ja">お問合せ</span><span class="en">CONTACT</span>
            <i class="far fa-envelope fa-size"></i>
            </a>
        </li>
    </ul>
</nav>

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

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

[CSS]

/* グローバルナビゲーション 余ったスペース分配  */
/* メニューの中は縦にアイコン・日本語・英語表示 */
#global-nav {
	background: linear-gradient(to bottom, #09f, #00a);
	background-color: #00a;
}
#global-nav ul {
	display: flex;
	justify-content: flex-start; /* デフォルト(なんでも) */
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
}
#global-nav li {
	flex: 1 0 auto;
	display: flex;
}
#global-nav a {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: #fff;
	padding: 10px 20px 10px;
}
#global-nav a:hover {
	background-color: #5af;
}
#global-nav i {
	display: block;
	margin-bottom: 5px;
}
#global-nav .fa-size {
	font-size: 2.5em;
}
#global-nav span.ja {
	font-size: 14px;
}
#global-nav span.en {
	font-size: 11px;
}

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

Page Navi

スポンサードリンク