WordPress

【JIN】スマホ時のグローバルメニューを横から表示させてみた

このカスタマイズをする前に必ずバックアップをとってから行うようにしてください。

この記事ではスマホ時のグローバルメニューを横から表示させる
カスタマイズについてご紹介します。

追加CSSを開く

WordPressの管理画面より「外観」→「カスタマイズ」→「追加CSS」まで飛んでいただき
CSSをコピペできる準備をします。

すでに追加CSSに何かしらの記載がある方もいるかと思いますが、基本的に無視して放置していただいて構いません。

以下のコードをそのまま追加CSSに追加する

/* スマホ時のグローバルメニューを横からスライド */
@media screen and (max-width:768px){
	.sp-menu-box{
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}

 

上記のコードは右から左へスライドしていきますが、
左から右へスライドさせたい方は

/* スマホ時のグローバルメニューを横からスライド */
@media screen and (max-width:768px){
	.sp-menu-box{
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
}

と言っても100%から-100%にしただけなので、
そんなに難しくはないかと思います。

こんな感じになってたらOK!

【JIN】インフォバーにボタンを追加してみました このカスタマイズをする前に必ずバックアップをとってから行うようにしてください。 この記事では、 インフォバーに簡単な...