新着記事プロフィールmenuJQuery無し。jQueryスマートフォンとか、最近はPC用のページでも増えている、「クリックやタップで開くメニュー」と聞いてイメージが湧くはずです。jQueryの.slideToggle()とか、.fadeIn()や.fadeOut()やshow()はたまたaddClass()であれこれしてメニューを格納→タップやクリックで表示。その程度なら、すこし勉強すればマジで簡単に出来るのですが、今回はさらに“jQueryすらも要らない”メニューエフェクトの実装の仕方をご紹介いたします。Effects」デモページはこちらちょっと解りづらいのですが、画面左上におなじみのメニューアイコンがありますのでクリックします。topsideユニークなメニューの表れ方です。左からニョキッと出てきました。現在「topside」と書かれた箇所が赤くなっているのですが、これはそのまま「topside」というエフェクトの種類です。box左下にヒョコっと出てくる「cornermorph」cornermorphさらに下に3項目ありますが、その3項目はスクリーンショットで撮れなかったので実際にデモをしてみます。SVG”スマホ対応で超イケイケのヤバイメニューエフェクトのデモ一番下の行にある3つの項目から、まずは左の「ELASTIC」から実装してみます。実はかなりコードが単純で、且つ、前述のとおりjQueryライブラリを呼ばなくてもいいのです!あるHTMLのクラス指定ルールに沿うだけでイケイケなメニューエフェクトが実装できるんですね。--&gt;このmenu-wrapがサイドメニュー全体を包んでいる要素で、それがニョキッと出てくる仕掛けです。Effectsはだいたいどれでも実装できると思います。content-wrapクラスを指定してあると、クローズ用のボタンをクリックしなくても.content-wrap範囲部分をクリックしただけでメニューが閉じます。contentは、メニューがスライドインなどしてきた時にオーバーレイが::after擬似要素で指定されるのでこれも書いておいたほうが良さげです。id=”morph-shape”を設置その中にSVGタグを設置します。divの方はdata要素で値を渡しているので、実装したいエフェクトのデモファイルからコピペするだけでOKです。上記のコード中のsvg周辺の記述は、そのまま、該当するデモファイルからコピペしてきています。次に、CSSとJavascriptファイルを読み込みます。/&gt;demo.cssはどちらでもいいと思います。デモファイル中には、それぞれのエフェクトに対応したCSSファイルが入っています。今回は「ELASTIC」というエフェクトを実装するので「menu_elastic.css」を読み込みます。&gt;&lt;/script&gt;headとかbodyの最後らへんに入れておきましょう。svgタグが入るエフェクトには「snap.svg-min.js」を読み込ませます。ここで注意ですが、最終行の「main3.js」。1~4ぐらいまでの種類がありますが、実装したいエフェクトにより読み込むjsファイルが異なります。これもデモファイルに書いてありますのでマネするだけです。デモファイルはHTMLやJavascriptがすごく簡潔なので読みやすいです。以下が「ELASTIC」デモです。FirefoxやGoogleChrome、IEなら10以降でご覧下さいね~!ELASTICのデモ。出てくるサイドメニューちょっと表示が崩れてますが、とりあえずデモなので無視します。続いて、「BUBBLE」です!ベースのHTMLは上記と同じですが、エフェクトが変わるので、SVGタグ周辺も書き換えましょう。これも同じくデモファイルを参考にコピペします。Menu&lt;/button&gt;~~~~~~メインコンテンツ&lt;/div&gt;&lt;/main&gt;そして、エフェクトにより読み込むCSSが変わるという点にもご注意ください。&gt;&lt;/script&gt;そして今度はmain4.jsを読んでいます。すると、こうなります!「BUBBLE」でボヨーンっとメニューが出るデモ気持ち良いです。波らしく、画面下に表示されることになります。&gt;&lt;/script&gt;読み込むCSS、そしてSVG周辺の記述を変更しましょう。WAVEはこのようになります。「WAVE」下からウォンっ!って出てくるメニューのデモこれら後半の3つの効果はsvgを使っています。browser4.4以降、ほかモダンブラウザは対応済みです。(対応状況の詳細)メニュー項目などのアニメーションにはCSS3のtransform:translate3d()を使っています。(対応状況の詳細)IEで試した結果、エミュレートでのテストではIEは10~でないとボヨンボヨンウネウネするエフェクトは楽しめませんでしたのでどうしても実装したい場合は配慮が要りますね。音楽Profile東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。