【Cocoon】モバイルメニューを横並びにしてスクロール可能にするCSSカスタマイズ(β版)

Cocoonカスタマイズ

このサイトをスマホ表示すると、上部グローバルメニューが横にスクローラブルになっています。

というわけでこれの実装方法を書いておきます。

スポンサーリンク

Cocoonのモバイルメニューを横並びスクロール可能に。

下記CSSを子テーマstyle.css(「外観」→「テーマを編集」内の、子テーマのスタイルシート(style.css))に書いてください。


@media screen and (max-width: 480px){
	/* モバイルトップメニュー */
	ul.menu-mobile{
		overflow-x: auto;
		overflow-y: hidden;
		display: flex !important;
		flex-wrap: nowrap;
		font-size: 14px;
		justify-content: flex-start;
		padding: 0 1em;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}

	ul.menu-mobile > li{
		padding-right: 1em;
		white-space: nowrap;
	}
	ul.menu-mobile .item-label{
		white-space: nowrap;
		font-size: 14px;
	}
}

なぜかやたらwhite-space: nowrap;が入ったりしていますが、これは試行錯誤の痕だということでそっとしておいてあげてください(消しても動くかもしれません)。

課題

スクロール可能であることを明示的に示す方法がないので、読者の想像力に依拠するしかありません。

こう、jQueryとかで限界までスクロールすると消える「»」をフローティング表示させられればいいのですが……、研究中です。

有料テーマに見劣らない!Cocoonで各要素がふわっとフェードインしてくれる簡単CSSカスタマイズを応用して、左から右へフェードインするようにメニュー全体をアニメーションさせれば明示させらるかも。

【支援お待ちしております!】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)

継続的な更新・サポートのためにご支援お願いいたします……!

▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

コメント