気持ちいいエフェクトのスライドメニュー「Off-Canvas Menu Effects」を入れてみた

   

スライドメニューを表示するときのエフェクトが気持ちいい「Off-Canvas Menu Effects」をSTINGER5に実装する方法と手順を解説します。個性的なスライドメニューで、ブログデザインに差をつけましょう!

スポンサーリンク

当ブログのデザインを「STINGER5」ベースに変更してから、おおよそ一ヶ月ほどが経とうとしています。

その間ずっと、「やらないとなー」と思いながらも、まったく手を付けられていなかったことがありました。それは…

そう、レスポンシブ対応のブログには欠かせない「スライドメニュー」です。「ドロワーメニュー」とも言ったりしますよね。どっちが正解なんだろう。

STINGER5にも、スマホ用のページではスライドメニューが最初から実装されています。でもこれがどうにも個人的に気に入らなかったので、スパッと外しちゃってたんですよね。

でもその影響で、「このサイトについて」や「お問い合わせ」ページヘのリンクが、ずっと無いままの状態でした。ブログとして失格な姿です。

はやくスライドメニューを実装しないとなー。でもありきたりな感じなのもイヤだし、かといって実装が難しそうなものには手をつけたくないし…。

そんなことをウダウダと考えながら「イイ感じのやつ無いかなぁ〜?」と、いろいろサンプルソースを物色していると、ありましたよ!ちょうどイイ感じっぽい「Off-Canvas Menu Effects」というものが。

「Off-Canvas Menu Effects」ってどんなの?

off-canvasmenueffects-02
「Off-Canvas Menu Effects」には、個性的で気持ちいいエフェクトのスライドメニューが9種類も用意されています。具体的にどんなエフェクトなのかはもう、こちらのデモサイトを見てもらうのが一番手っ取り早いですね。

そして今回わたしは、泡がはじけたようなエフェクトのスライドメニュー、その名も「BUBBLE」というエフェクトを実装してみることにしました。

「Off-Canvas Menu Effects」の実装手順

ファイル一式をダウンロードする

まず、以下のサイトにアクセスして、「Download source」と書かれているボタンをクリックし、ソース一式をダウンロードしましょう。

off-canvasmenueffects-03

すると、「OffCanvasMenuEffects.zip」というファイルがダウンロードされます。そしてzipファイルを展開すると、いくつかのファイルが格納されています。この中から今回利用するファイルは、

  • bubble.html(ソースの一部)
  • css/menu_bubble.css
  • js/classie.js
  • js/main4.js
  • js/snap-svg-min.js

になります。なお、「bubble.html」、「menu_bubble.css」、「main4.js」の3ファイルは、「BUBBLE」のエフェクトでのみ使うファイルになりますので、もしほかのエフェクトを実装する場合は、違うファイルを利用することになります。
off-canvasmenueffects-04

具体的に、どのエフェクトでどのファイルを利用するのかを調べておいたので、以下に記載しておきますね。

共通ファイル

js/classie.js
js/snap-svg-min.js

TOP SLIDE

index.html(ソースの一部)
css/menu_topside.css
js/main.js

SIDE SLIDE

sideslide.html(ソースの一部)
css/menu_sideslide.css
js/main.js

CORNER BOX

cornerbox.html(ソースの一部)
css/menu_cornerbox.css
js/main.js

NESTED CORNER BOX

cornerbox_nested.html(ソースの一部)
css/menu_cornerbox_nested.css
js/main2.js

TOP EXPAND

topexpand.html(ソースの一部)
css/menu_topexpand.css
js/main.js

CORNER MORPH

cornermorph.html(ソースの一部)
css/menu_cornermorph.css
js/main.js

ELASTIC

elastic.html(ソースの一部)
css/menu_elastic.css
js/main3.js

BUBBLE

bubble.html(ソースの一部)
css/menu_bubble.css
js/main4.js

WAVE

wave.html(ソースの一部)
css/menu_wave.css
js/main3.js

必要ファイルをコピペする

では実装作業に入りましょう。まずは、対象となるサイトの「css」フォルダに「menu_bubble.css」をそのままコピペしましょう。もし「css」という名前のフォルダがない場合は、「css」という名前で新たにフォルダを作って、そこにコピペしておきましょう。

つぎに、対象となるサイトの「js」フォルダに、「classie.js」「main4.js」「snap.svg-min.js」の3ファイルをコピペします。こちらももし「js」という名前のフォルダがない場合は作成して、その中に3ファイルをコピペしましょう。

HTMLソースの移植

つぎに、headタグ内にCSSファイルとJSファイルの呼び出しを追記します。

まず、bubble.htmlを開いて、15行目〜16行目にある以下のソースをコピーしましょう。

そして、対象となるサイトのheadタグ内に、この2行をペーストします。

なお、STINGER5の場合は、header.phpにあるheadタグ内に、以下のソースをペーストしました。

再度、bubble.htmlに戻りまして、22行目〜43行目にある以下のソースをコピーしましょう。

そして、対象となるサイトのbodyタグ直下にペーストします。STINGER5の場合はこちらも同じく、header.phpにペーストします。

ですがSTINGER5で既に「content」というクラス名が利用されており、このままでは競合を起こしてしまいますので、例えば「content-area」のような別のクラス名に書き換えてペーストしましょう。

その際、css/menu_bubble.cssに記載されている「content」クラスの記述部分を、書き換えたクラス名に変更してくださいね。

そしてまた、bubble.htmlに戻りまして、75行目〜78行目にある以下のソースをコピーしましょう。

その後、対象となるサイトのbody閉じタグ直前にペーストします。

ちなみにSTINGER5では、footer.phpのbody閉じタグ直前に、以下のソースをペーストしました。

基本的には以上の作業で、エフェクトが掛かったスライドメニューが動作するはずです。あとはメニューボタンの表示位置や大きさ、色の調整、そしてメニュー文字色や背景色の変更、メニューのリンク設定などの微調整をすれば完了ですね。

ちなみに当サイトの実装前と実装後のヘッダー周りはこんな感じに。

実装前

off-canvasmenueffects-05

実装後

off-canvasmenueffects-06

ほとんど変わりませんね(笑)。左上にスライドメニューのボタンを配置して、サイトのロゴは中央に移動させました。そしてスライドメニューのエフェクト具合は、実際の挙動を見てくださいませ。

なお、メニューの各項目左側にあるアイコンにはWEBフォントの「Font Awesome」が使われています。STINGER5は最初から「Font Awesome」が使えるようになっているので、アイコンの入れ替えもラクですよ。

「Font Awesome」については以前、当ブログでも取り上げたことがあります。

「Off-Canvas Menu Effects」の問題点

実はこの「Off-Canvas Menu Effects」を使ったスライドメニューですが、実装してから気づいた問題が1つあります。

ページ先頭へのスクロールが使えなくなる

ページを読み進めて画面を下へとスライドしていくと、画面の右下に、そのページの先頭まで戻るためのボタンが現れますよね。

これがなんと、今回の「Off-Canvas Menu Effects」を実装したタイミング動作しなくなってしまったんです。それだけならまだしも、iPhoneのブラウザで使える、画面上部をタップするとページの先頭に戻る動作もできなくなってしまうという始末。

いろいろ調べてみた結果わかったことは、css/menu_bubble.cssの先頭に記載されている、

この指定が影響しているようで、こちらを削除することで問題を解消させることができました。おそらくは、高さ100%の指定があることによって、画面の先頭に戻る動作ができなくなっちゃうみたいですね。

ただ、この指定を削除することの弊害もありまして、スライドして開いたメニューの下領域が画面を下スクロールすると切れてしまうということです。
off-canvasmenueffects-07

んー悩ましい…。両方解決できたら良かったのですが、わたしの力量ではちょっと無理でした。

そして結局のところは、メニューの下領域が切れてしまうよりも、画面の先頭に戻れないほうがユーザビリティー的にマズいだろうと判断して、css/menu_bubble.cssの先頭にある指定を削除することにしました。

さいごに

いかがでしょうか?今回は「Off-Canvas Menu Effects」のスライドメニューを、STINGER5に実装する方法をご紹介しました。

なので、WordPress以外で構築されたサイトや、同じWordPressでも別のテーマ、そしてSTINGER5でも独自のカスタマイズが入っていたりすると、今回の方法はそのまま利用することができないかもしれません。予めご了承ください。

ということで、実装するには若干テクニックが必要になりますが、コーディングの知識が少しあればチャレンジできる内容だと思います。

ありふれたスライドメニューじゃなくて、ちょっと面白くて気持ちいいエフェクトのスライドメニューを入れてみたいと思った時は、この「Off-Canvas Menu Effects」を利用してみてはいかがでしょうか?

 - ブログカスタマイズ

スポンサーリンク

  関連記事

わたしがSTINGERでカスタマイズしたことをまとめてみた
わたしがSTINGER3でカスタマイズしたことをまとめてみた

STINGER3をテーマにした当ブログで、わたしがこれまでに実装したカスタマイズの内容を、まとめてご …

WEBフォントで簡単に!STINGER3の細かいところにアイコンを入れてみた

WEBフォントを使って、簡単にアイコン装飾を行う方法をご紹介します。細かいところまでに気をつかえば、 …

WordPressのテーマをSTINGER3に変更してみた

ブログを始めて少なくとも数ヶ月はほとんどアクセスなんてありませんよっ!なーんてことは重々承知のつもり …

STINGER3の「関連記事」表示を横並びにカスタマイズしてみた

STINGER3の「関連記事」表示を横並びにカスタマイズする方法をご紹介します。必要以上に縦長になっ …

CSSを使ってプロフィールやサムネイルの画像を丸く切り抜く方法

最近よく見かける、プロフィールの画像やサムネイルの画像なんかを丸く切り抜いたデザイン。これは丸く切り …

WordPressでメディアを挿入のリンク先を最初からなしに設定する方法

WordPressで投稿の本文に画像メディアを挿入する時、リンク先をメディアファイルではなく、最初か …

CSSとWEBフォントだけで作ったSNSシェアボタンをSTINGER3に入れてみた

CSSとWEBフォントだけで作ったSNSシェアボタンを、STINGER3に導入する方法をご紹介します …

STINGER3のフッターを3カラムにカスタマイズしてみた

個人のブロガーは、記事の執筆はもちろんのことながらブログのデザインにも多少は気を配って、自分でカスタ …

WordPressのコメント欄をデフォルトからFacebookに変更してみた【STINGER3】

当ブログですが、まだそれほどアクセスは無いはずなのにしばしばスパムコメントが入ってきます。不思議です …

STINGER3のtitleタグ先頭に入る改行とスペースを消してみた

photo credit: Huasonic via photopin cc 実はさっき気がついてし …