TIPSこの広告は、90日以上更新していないブログに表示しています。使える!アコーディオンメニューの実装こんにちは。エンジニアの富澤です。今回はWebページでよくみかけるアコーディオンメニューについて勉強しましたのでご紹介します。アコーディオンメニューは、限られた範囲で多数の項目を一覧したいときに便利です。※本TIPSではHTMLとCSSの基本的な知識があることを前提とします。jQueryも使用しているためこちら(jQueryサイト)からソースをダウンロードするかgoogleなどが配信しているCDNサービス(https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js)を利用し、HTMLに読み込んでください。シンプルな実装シンプルなアコーディオンメニューを実装していきます。#d6dddf;}jQuery$(document).ready(function(){$(".a_item").click(function(){$(this).next().slideToggle(300);});});class名「.a_contents」を「display:none;」に設定し、アコーディオンメニューのコンテンツ部分を非表示にしておきます。class名「.a_item」に対しクリックによって発動するイベント「click(function(){});」を、その中に「slideToggle()」を設定し、クリックした時にスライドしながらコンテンツ部分が開閉するようにします。ワンポイント.click(function(){});クリックした時に処理を実行するイベントを登録できます。特定のclass名、id名に対して、設定をすることができます。ここではclass名「.a_item」がクリックされたときにイベントを発生させます。$(this).next().slideToggle(300);「this」はイベントを登録している要素に対し、そのアクションを行った要素のみに有効です。class名などを指定すると、「そのclassがあたっているすべての要素」に対して発動してしまいますが、「this」にすると押したボタンに対してのみにイベントが有効になります。「next()」は、「次」にあたる兄弟要素を指します。ここでは、クリックしたボタンの次の要素のコンテンツ部分(「.a_contents」)を指します。「slideToggle()」は要素が非表示の時はslideDownを行い、要素が表示している時はslideUpを行います。()内には時間を指定することができます。「slideToggle(300)」の場合、アニメーションに0.3秒の時間をかけて動作します。リッチな実装シンプルなアコーディオンメニューを元に機能を増やし、リッチな実装にしていきます。増やしていく機能を下記にまとめました。指定することでマウスオーバーしたとき、CSSに変化を与えることができます。ここでは「.a_item_r:hover」にbackground-colorを指定することで「.a_item_r」をマウスオーバーしたとき、色に変化をさせることができます。要素の末尾に要素を追加し、CSSでデザインすることができます。ここでは右側の矢印を「:after」で挿入しています。「:after」を使うときcontent:""を指定するのがポイントです。時間的変化をまとめて指定することができます。linear;」(0.3秒間を一定のスピードで変化)を指定しています。これにより上記ソースにある「transform」のスピードを調整しています。要素に対して回転させたりする動きを適用する際に使用します。rotateZ(180deg);」を指定することで、アコーディオンメニューが開いた時に180度回転する設定をしています。※「transition」「transform」は、CSS3から新しく登場したプロパティで記述の際、各ブラウザ用の"ベンダープレフィックス"が必要になります。p",this).fadeIn(1500);$(".selected").removeClass("selected");$(this).addClass("selected");}});});class名「.a_item_r」に対しクリックによって発動するイベント「click(function(){});」を設定します。p」を非表示にする「$(this).next().slideUp(300);」→クリックした要素の次の要素に対しslideUpするを設定しておきます。次に、ifについてです。if構文は「条件分岐」といいます。「if($(this).next().css("display")=="none")」は、もし「this」の次の兄弟要素が非表示ならば、何らかの処理を実行する、という意味になります。}中括弧部分に記述します。「this」に対し「selected」を追加する・マウスオーバーしたとき、色を変化させる.a_item_r:hover{background-color:#6aec99;}background-colorを指定することで「.a_item_r」をマウスオーバーしたとき、色に変化をさせることができます。・クリックしたとき、選択中のものに色をつける$(this).removeClass("selected");$(this).addClass("selected");「removeClass」は指定したclassの削除をします。「addClass」は指定したclassの追加をします。ここではマウスオーバーしたときのために入っています。・一方が開いていて、開いていない方のアコーディオンをクリックしたとき、開いているアコーディオンを閉じる$(".a_contents_r").slideUp(300);$(this).next().slideDown(300);最初に開いているアコーディオンを閉じる処理をし、次にクリックしたアコーディオンを開きます。p",this).fadeIn(1500);「fadeIn()」プロパティをつかって、非表示の要素をフェードインさせます。ここでは、アコーディオンメニューが開いたときに文字がフェードインするようにしています。「.fadeIn(1500)」の場合、アニメーションに1.5秒の時間をかけて動作します。・右側の矢印に開閉が分かるようなアニメーションをつける$(".a_item_r").removeClass("open_close_r");$(this).addClass("open_close_r");「.open_close_r」が矢印のアニメーションに必要な設定になっています。そのため、「removeClass」と「addClass」を用いてclassの削除と追加をします。アニメーションの設定はCSSで設定しています。*/}if内の要素が真である場合に処理を行います。偽の場合、else{}内の処理を行います。CSS3での実装これまではHTML+CSS+jQueryで実装を行いました。実はCSSのみでの実装も可能なのです。CSSのみで実装を行うためにはフォームの構成部品であるチェックボックスのON・OFFを利用します。110px;padding:10px;}class名「.open_close_c」に「display:none;」を設定し、チェックボックス自体は非表示にします。「ul」に対してアニメーションが発生したときのスピードを、「transition」で設定します。「ul」を非表示にする際には「display」での非表示をつかわず、hightをつかいます。「transition」のアニメーションがdisplayに対して無効のため、アニメーションにできないからです。設定は「height:0;」「overflow:hidden;」とします。チェックボックスをチェックしたとき、「height:auto;」を設定することで、「hight」が0から110pxになる過程が、アニメーションするようになります。非表示のチェックボックスをチェックするような動作をさせるために「lavel」を利用します。type="checkbox"」に対して、idを設定しておきます。「label」タグ内にforを設定します。type="checkbox"」で設定したid名と同様にしておきます。この設定をすることにより、「label」をクリックとチェックボックスのON・OFFが連動するようになります。ul」の場合(チェックした場合)でCSSを分けて書くことができます。ul「input[type="checkbox"」は、属性を使ったCSSの指定方法です。属性名や属性値によりスタイルの適用を指定することができます。ul」は、クラス名「.open_close_c」を持つ「input[type="checkbox"」の次の兄弟要素である「ul」対してCSSをかけるための記述です。まとめいかがでしたでしょうか?アコーディオンメニューは、「click」イベントを用いて対象に「class」を追加することで様々な実装をすることができます。jQueryはソースを上から読み込んでいくため、記述は正しくても順番が違うと実装できないことがあり苦労しました。CSS3の登場でjQueryを使わなくても実装可能になりました。今後も新しい実装方法が出てくるかも知れません。Web業界の進歩はとても早いので遅れをとらぬよう、日々勉強していきます。読者になる検索リンクはてなブログブログをはじめる週刊はてなブログはてなブログPro最新記事こんにちは。デザイナー兼エンジニアの酒井...こんにちは。デザイナーの那須です。昨今、...schema.orgを設定してクリック率UP!JSON-LDでの記述方法の基本こんにちは。デザイナーの酒井です。新年度...こんにちは。デザイナーの宮下です。新年度...月別アーカイブはてなブログをはじめよう!BOELさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。