【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装

今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニューをサイトに実装してみたいと思います。

いままでだと、jQuery（javascriptライブラリ）とかで動かすことが多かった動くメニューですが、最近ではCSS3のアニメーション機能が充実しているので、CSSでやってみます。さっそく、見ていきましょう。

なぜ、jQueryではなくCSSのみで、タップでふわっと広がって透けるスマートフォンメニューを行うか？

jQueryでタップで開くスマホメニューは、このサイトにも実装されていました。最近、いままでなんとなく利用していたjQueryについて調べたところ、『ちょっとした機能ならば、CSSで代用できるんではないか？』と推測しました。

また、自分のサイト（このサイトなど）で、『jQueryはスマホアコーディオンメニューくらいしか使っていないのに、jQueryを何回も読み込むのは、リソース的に無駄が多いかな』と思ったこともあり、CSSの短いコードでやろうと思ったわけです。もちろん、jQueryが必要な機能をいっぱい実装したいときは、jQueryを使うべきですが。

CSSのみで、タップでふわっと広がって透けるスマートフォンメニュー実装例

ブラウザ表示例（ユーザーエージェントをスマートフォンに）

そんな感じで、サクッと作ってみました。このぶろぐについています。メニューは全部CSSですが、ユーザーエージェント判定の部分のみPHPです。

通常はこんな感じのメニューで・・・

メニュー部分をタップすると、ふわっと現れます。重なって透ける機能もつけてみました。ちょっとお洒落かもしれません。

実際のコード&ポイント

ポイントはcheckboxでクリック判定（ただし、チェック機能は使わないからdisplay: none;）、 transitionで時間指定、開いたメニューはposition指定してz-indexで重ねる（z-indexがうまく動かないときには、position指定が適切でない場合が多い）、opacityで透けさせる（checkedのとき、visibility: visible;にして、opacity: 0.9くらいにすると、ちょっと透ける）といったところです。

参考になったコード(CodePen/Pure CSS Accordion)

参考にしたコードは、海外のプログラムのコードなどを共有・紹介するサイト『CodePen』にあった『Pure CSS Accordion』でした。
アコーディオンみたいに開くタイプだったんだけど、『これメニューに使えんじゃね？』ってことで、特に『チェックボックスをクリック判定に使う』みたいなポイントで参考に。リストタグで項目を複数入れることにより、メニューみたいに機能するようになりました。

【参考】Pure CSS Accordion 2.0
https://codepen.io/raubaca/pen/PZzpVe

メリットは？→jQueryやプラグインカットで、サイトのファイルサイズ縮小とお洒落感を両立！

もちろん、見た目以外のメリットもあります。このサイトはＷＰテーマ・昔のstingerを改造して作っていますが、このテーマではアコーディオンメニューを動かすのに、『jQuery＆base.js』を読み込まなければなりません。


footer.phpやfunctions.phpにjQuery＆base.jsを読み込むようになってたので、CSSのみで実装できれば、これらをカットできます。

さらに、wordpressということから、JavaScript読み込み調整系のプラグインもカットできます（jQueryが無いので、使う必要がない）。

『Speed Up – JavaScript To Footer』などをカットしたので、アクティブなプラグインは４つだけになりました。そういう取り組みを積み重ねた結果・・・・

シンプルで地味目な、デフォルトテーマtwenty seventeenで、（seoちぇきで計測）サイトのファイルサイズ229.6KB・読み込み2.427秒だったのが

ファイルサイズ53.4KB・読み込み1.452秒みたいに。コードのシンプルさは最近のstingerよりシンプルかもしれません。

確認できた不具合・難点～swiper(jqueryのスライダープラグイン)が上に重なる

javascriptを使わないので超軽いのがメリットの、このタイプのメニューですが、もちろん難点もありました。

『positionやz-indexで重ねている』ので仕方ない部分もありますが、管理人が確認したところだと・・・

swiper(jqueryのスライダープラグイン)の画像にメニューが重なってしまうというのがありました。イメージはこんな感じです
swiperも『positionやz-indexで重ねている』という部分が見受けられ、これだとメニューのうえにスライダー画像が重なって操作できなくなります。
(また、実装してみたサイトに、CSSフレームワーク向けの独自クラスに、position指定が多かった。そのほかtransformなどの影響もあるかもしれません。)

対処としては、CSSチェックボックスの上に重ねるメニューではなく、『javascriptでクリック開閉式メニュー』にする事で対応しました。

まとめ・覚えておきたいポイント(CSS)

といったところでしょうか。jQueryやCSSでできるポイントをしっかり見極めると、ファイルサイズを削ってリソース節約しつつ、ちょっと洒落たサイトにできるかと思いますので、皆さんもぜひチェックしてみてください。