Blog

【jQuery】アコーディオンメニューでコンテンツの表示位置がずれるのを防ぐ方法

2016.09.27Cat:jQuery デザイナー
nino-eye

jQueryアニメーションの全盛期は使うことが多かったアコーディオンメニュー。

アコーディオンメニューとは、
クリックした対象のコンテンツだけを表示して、それ以外は畳んでおくというUIです。

最近では徐々にサイトに設置する機会が減ってきましたが、
それでも使う機会がなくなったわけではありません。

PCメインの時代はアコーディオンメニューは非常に重宝しました。
スマホがメインの最近では、コンテンツが長くなるために、
折りたたみのアニメーションのときに、
コンテンツの頭が移動し、場合によっては画面外(上)に飛び出してしまうという問題が発生します。

↓通常のアコーディオンメニュー
DEMO

最近になって設置を避けるようになったのは、その問題のせいではないでしょうか。

今回は、アコーディオンのアニメーションのときに、
コンテンツの位置が見た目上、移動しないようにする方法を考えてみました。

↓改良したアコーディオンメニュー
DEMO

方法

今回考えた方法は、jQueryでのアニメーションのときに、
アニメーションの各ステップごとに、コンテンツ上での現在位置を確認して、
移動した分、画面をスクロールさせるというものです。

HTML

jQuery

jQueryのanimateをはじめ、slideUp、slideDown、fadeInといったアニメーション系のAPIでは、
オプションとして、アニメーションの各ステップ(フレーム)ごとに関数を実行する、stepというプロパティを設定することができます。

このオプションを利用して、各ステップごとにアコーディオンメニューのタイトルの移動距離を取得して、
その分画面をスクロールさせるようにしてみました。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ