Cocoonナビメニューに階層を付けたとき、孫メニューがはみ出し見えない対処：コピペCSS

Cocoonのメニューに階層を付け、下層に子カテゴリなどをいれるとonマウスしたとき左へスライドして表示されます。

置いてるメニューの位置などで、幅の狭い画面で見ると下層（孫カテゴリ）のリンクがはみ出しリンクが踏めません（スクロールバーが出る）。

その対処として画像のように、左に子カテゴリ（下層メニュー）を表示するCSSを書いてみました。

※ちなみにメニューの変更は『外観』－『メニュー』－『メニュー構造』にて設定できます❦

メディアクエリでメニュー階層がはみ出す位置をチェック
1. はみ出した領域のチェック方法
2. 最小値：最大値をメディアクエリで指定
メニューに階層（子・孫カテゴリ）があるとき左へ出すCSS
1. メニューに階層を付けている下層のみ装飾したい場合
さいごに

メディアクエリでメニュー階層がはみ出す位置をチェック

はみ出している状態の場合だけ下層メニューを左ではなく右へ表示させる為、はみ出す横幅の範囲をチェックする方法です。

Chrome要素の検証（デベロッパーツール：F12キー）を使ってチェックします。

LINK要素の検証（デベロッパーツール）の使い方！初心者がカスタマイズできる方法！HTMLとCSS入門編

検証画面を開くと左右に動かし最小値は何pxから『はみ出すか』、はみ出さない領域をチェックします。

はみ出さないギリギリの領域の横幅をチェックする。

Chromeだと画像のように右上に数字が表示されるので、この場合横幅の最小値896pxだとわかります。

1px画面幅を広げ897pxになると、はみ出したのがわかりますよね。これがはみ出す範囲の最小値です。

次CSSの指定で必要なので、ご自身の環境で試してメモしてくださいね❦

はみ出した領域のチェック方法

子カテゴリをONマウスしたら、スクロールバーが表示される

子メニューは見えるけど、孫メニューがみえてません。

見えてない孫カテゴリ：イメージ図

はみ出す横幅をCSSメディアクエリで指定し、右へ出た下層メニューを左に表示するCSSを書いてあげます。

レスポンシブ対応なので、はみ出す領域だけに適応させるため、はみ出さない最大値もチェックしてください。

幅を広げてスクロールバーが出ない状態

下にスクロールバーが出てないので、領域いっぱいのサイズをチェックすると、この場合1236pxだと分かります。

最小値：896px
最大値：1235pxから1236pxあたりではみ出さない。

サイトによって違うので、はみ出す横幅のチェックをしてくださいね❦

最小値：最大値をメディアクエリで指定

うえで調べた数値、897pxから1235pxだと微妙にはみ出したので、最大値は1236pxと指定した例になります。

調べた数値をCSSに入れてください。

@media screen and (min-width: 897px) and (max-width: 1236px) {
	/* ここに後述CSSをコピペ */
}

(min-width: 897px)最初値、 (max-width: 1236px) 最大値を指定し、CSS（はみ出す横幅のときだけスタイル：後述｝を2行目にコピペすれば以下画像のようになります。

はみ出し対策済み：下層メニューが右側に開く様子

どの幅からのアクセスもはみ出さないで、子メニュー・孫メニューをクリックできる状態です。

下層メニューが通常の左側が開く様子

指定した横幅以外、はみ出さないので通常下層メニューが左へ開きます。

メニューに階層（子・孫カテゴリ）があるとき左へ出すCSS

画像のような表示になるCSSです。上記メディアクエリ内に以下スタイルを貼り付けて、style.cssに追記してください。

※(min-width: ***px) ・(max-width: ***px)の指定方法は上述通り。

@media screen and (min-width: ***px) and (max-width: ***px) {
	/*子カテゴリを左へ出し、フォントを右揃えに */
	.navi-in > ul .sub-menu {
		right: 0;
		margin-left: 0;
		text-align: right;
	}
	/* アイコンフォントを右から左に変更 */
	.navi-in > ul .sub-menu .menu-item-has-children a::after {
		content: "";
	}
	/* 子カテゴリがある時、アイコンフォントを左に付ける */
	.navi-in > ul .sub-menu .menu-item-has-children > a::before {
		font-family: FontAwesome;
		content: "\f104";
		padding-left: 3px;
		position: absolute;
		left: 3px;
	}
	/* 子カテゴリがないときはアイコンフォントは非表示 */
	.navi-in > ul .sub-menu .menu-item-has-children a::before > .menu-item a {
		content: "";
	}
	/* 子カテゴリを左に表示 */
	.navi-in > ul .sub-menu ul {
		left: -240px;
	}
}

Font Awesomeの『』左アイコンを使用しCSSには以下ページのcontent: "\f104";を指定してます。

LINKangle-left｜Font Awesome

CSSの指定方法：使い方は以下リンク先でチェック。

LINKWordPress・CMSでFont Awesomeアイコンフォントを導入！最新アイコンが表示しないとき、バージョンアップ方法付き

メニューに階層を付けている下層のみ装飾したい場合

親メニュー固有のIDを指定すれば、孫カテゴリなど複数置いてる場合、指定したカテゴリのみメディアクエリで指定することもできます。

※(min-width: ***px) ・(max-width: ***px)の指定方法は上述通り。

@media screen and (min-width: ***px) and (max-width: ***px) {
	/*子カテゴリを左へ出し、フォントを右揃えに */
	.navi-in > ul #menu-item-*** .sub-menu {
		right: 0;
		margin-left: 0;
		text-align: right;
	}
	/* アイコンフォントを右から左に変更 */
	.navi-in > ul #menu-item-*** .sub-menu .menu-item-has-children a::after {
		content: "";
	}
	/* 子カテゴリがある時、アイコンフォントを左に付ける */
	.navi-in > ul #menu-item-*** .sub-menu .menu-item-has-children > a::before {
		font-family: FontAwesome;
		content: "\f104";
		padding-left: 3px;
		position: absolute;
		left: 3px;
	}
	/* 子カテゴリがないときはアイコンフォントは非表示 */
	.navi-in > ul #menu-item-*** .sub-menu .menu-item-has-children a::before > .menu-item a {
		content: "";
	}
	/* 子カテゴリを左に表示 */
	.navi-in > ul #menu-item-*** .sub-menu ul {
		left: -240px;
	}
}

#menu-item-*** はメニュー固有のIDを指定してください。例）#menu-item-15337

リンク先目次：5章『PC検証画面でメニューの固有ID指定方法』