【初心者向け】jQueryとCSS3でぬるっと動くスマホメニューを実装してみたので仕様を解説します。TOP【初心者向け】jQueryとCSS3でぬるっと動くスマホメニューを実装してみたので仕様を解説します。>家の中にいるよりも電車に乗っている時のほうが何故か集中できる...。PITE.(@infoNumber333)です。最近また少しずつですがスマホ用テーマに改良を加えています。これからは完全にスマホメインですからね。今回は、前回紹介したスマホで”横から出てくる”メニューに続き、スマホ用の動きがなめらかなアコーディオンメニューを初心者ながらに実装してみたので、勉強も兼ねてどのようなものなのか一つひとつ詳しく解説していきます。スマホ用テーマに力を入れてみたいブログ初心者の方、jQueryを使ってみたいなーという方は参考にしてみて下さい。細かい内容の前に、どのようなメニューを実装したのか軽くご説明を。今スマホからこの記事を読んでいる方は一番下までスクロールしてもらうとメニューがあるのでどのような動きか試して見て下さい。今回のメニューでは僕のブログの主要なカテゴリーを縦に並べています。そんでこのメニューをクリックするとぬるぬるっと、ずるずるっと、子カテゴリーが出てきます。他の親カテゴリーをクリックすると開いていたメニューが閉じてクリックしたカテゴリーのメニューが開く仕様です。こんなメニューを実装します。参考にさせていただきました。アコーディオンメニューは簡単に実装できるjQueryプラグインがたくさんあるのですが、折角の機会なのでjQueryを勉強したいと思って、細かく仕組みが解説されているこちらの方法を試してみることに。非常にわかりやすくて役に立ちました。有益な記事をありがとうございます。実装してみよう!(HTML)それでは実際にメニューを組み込んでみましょう!まずはHTMLの部分から。メニューを実装したいところに以下のコードを埋め込んで下さい。</li></ul>ID”accordion”が付いているulの中にliを入れるとそれが親カテゴリーになります。その中のulの中のliが子カテゴリーです。この構造さえ同じなら何個でもカテゴリーを増やすことが可能です。カテゴリー分けは自分で好きにやりたかったので一つひとつ直接リンクを貼っています。CSSはこのような形になっています。widthやpadding、box-shadowなどは自分のサイトに合わせて適宜変更をお願いいたします。「>」が抜けてしまうと#accordion要素の中の2つのliにCSSが適用されてしまうのでそれを避けるために入れてあります。「transition」を使うことによって滑らかな動きを表現しています。ここの数値を変えれば動きの速度が変わります。実装してみよう!(jQuery)最後はjQueryの実装です。});});</script>こちらのコードを僕はヘッダーに直書きしました。今回は勉強も兼ねているのでコードの内容を説明しておきましょう。ul」の部分を隠すという意味になります。続いて「$(“#active”).show();」の部分で「#active」が付いた要素を見せる、という記述をしています。a”).click(function(){」は「#accordion要素の中のliの中のaをクリックすると」という内容。$(“+ul”,this);」。ここが最初良く理解出来ませんでしたが、説明を見ると「click」という変数を作成しその中に「$(“+ul”,this);」、つまり「#accordion要素の中のliの中のaの隣のul」を格納する、という意味らしいです。簡単に言うと子カテゴリーのことを指します。5行目、「click.slideDown();」でクリックしたメニューの中身をスライドダウンして表示させます。ul」の中の「click」以外の要素をスライドアップしてしまう命令を出しています。以上がソースコードの説明です。理解が違っている部分があったら指摘して頂けるとありがたいです。このコードとは別にjQuery本体を読み込まないとプログラムは動きません。src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>僕はこのようにGoogleのAPIから引っ張ってきています。何もわからなければ上のコードをコピペでOKです。おわりにここまで順番にコードを組み込んでいけばちゃんとアコーディオンメニューが実装されていると思います。jQueryに関してはド素人なので今回のように先人の知恵を借りながら少しずつ勉強して行きたいです。HTMLやCSSも最初は既存のテーマファイルを少しずつ編集してしながら身についたのでjQueryもきっと同じように慣れていくでしょう。́v`)ノPITE.(@infoNumber333)更新情報はLINE@で!ここまでお読みいだきありがとうございます!更新情報や限定コンテンツはLINE@でお届けしていますので、右のボタンから登録をお願いします!あなたのスマホに記事を直接お届け。jQuerySPONSOREDtotal10share!シェアしてくれるとめっちゃよろこびます。(3)FOLLOW記事の更新情報や日々の出来事はSNSで。フォローしてもらえるとうれしいです。HIDETAKA中目黒在住のブロガー、28歳。つきまして【初心者向け】jQueryとCSS3でぬるっと動くスマホメニューを実装してみたので仕様を解説します。monographはiPhone・Macなどのガジェットを中心に管理人PITE.の気になるモノを幅広く紹介するブログメディアです。月間50〜70万PV。気軽に楽しんで行って下さい。