Cocoonユーザーさんに
やりたいカスタマイズがあれば、お問い合わせよりお待ちしてます。
または検索窓に『Cocoon ○○ カスタマイズ』など入力してください。

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

スポンサーリンク

Cocoonナビで孫メニューがはみ出す対処:左から右に表示を変更するカスタマイズ

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

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

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

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

スポンサーリンク
スポンサーリンク

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

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

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

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

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

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

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

897pxになると、はみ出す

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

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

親メニュー固有の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

Cocoonグローバルメニューに画像を付けるCSSコピペカスタマイズリンク先目次:5章『PC検証画面でメニューの固有ID指定方法』

LINKCocoon!ヘッダーナビに画像を入れる、コピペCSSのカスタマイズ

このカスタマイズをしていても同じCSSで対応できます!

さいごに

色んな環境がありますが、このCSSで気がかりが解消できれば。と思います❦

ちなみに私のサイトビバ★りずむではメニューに子階層は置いてません

主張させたいカテゴリと、必須固定ページのみ置いてます。こんなメニューの置きかたもある。って話で^^

それでは、かうたっくでした!

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております❦

トップへ戻る