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

更新: 2021/02/23 2840文字

【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』でした。 アコーディオンみたいに開くタイプだったんだけど、『これメニューに使えんじゃね?』ってことで、特に『チェックボックスをクリック判定に使う』みたいなポイントで参考に。リストタグで項目を複数入れることにより、メニューみたいに機能するようになりました。

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

もちろん、見た目以外のメリットもあります。このサイトはWPテーマ・昔のstingerを改造して作っていますが、このテーマではアコーディオンメニューを動かすのに、『jQuery&base.js』を読み込まなければなりません。 footer.phpやfunctions.phpにjQuery&base.jsを読み込むようになってたので、CSSのみで実装できれば、これらをカットできます

さらに、wordpressということから、JavaScript読み込み調整系のプラグインもカットできます(jQueryが無いので、使う必要がない)。 『Speed Up – JavaScript To Footer』などをカットしたので、アクティブなプラグインは4つだけになりました。そういう取り組みを積み重ねた結果・・・・

シンプルで地味目な、デフォルトテーマ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でも、簡単なアニメーションはできる
  • checkboxでクリック判定をすることができる(display: none;だと見えない)
  • transitionで時間指定して、動きをつける
  • position指定してz-indexで上に重ねることができる
  • opacityで透けさせることができる
  • jQueryなどの読み込みが減る分、ファイルサイズが小さく、読み込みも早くなる
  • position指定してz-indexで上に重ねるプラグイン・フレームワーク利用時は、干渉に注意

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

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


【カテゴリ】- CSS
【タグ】-

関連記事

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)
【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法
ヘッダー・見出しを、『片方だけ丸い・台形・矢印』などおしゃれデザインにできるCSS
cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)
【CSSで画像色合い調整やぼかしetc】 filterプロパティを使って、ぼかし・セピア・色調反転などをやってみる
【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由
bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える
【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介
WordPressのアーカイブって、記事が増えると長くてたいへん!CSSで短くして使いやすくするには?
【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装
【ワードプレスstingerスマホ最適化】記事一覧タイトル表示場所をPC/SPで切り替えて、スマホレイアウトで見やすくする
サイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現