シンプルなドリルダウンメニューを作る【スマホ向け】

今回はシンプルなドリルダウンメニューを作ってみます。ドリルダウンメニューとは、多階層のリストメニューを表現するデザインの1つで、メニューをタップするとサブメニューがスライドしてくるようなイメージの動きとなります。

ドリルダウンメニューの方式

今回作るドリルダウンメニューは、以下の図のようなイメージです。各メニューの下層メニューが重なった状態で横に並んでいて、初期表示時はトップメニューの部分だけ表示させています。あるメニューをタップすると、押されたメニューの下層メニューのみを表示領域にスライドさせます。

drilldown2

デモ

というわけで、見てもらった方が早いです。今回のデモはこちらです。

デモページ

下層がどのように動いているかどうか分かりやすくするため、非表示を行わないバージョンのデモも用意しました。

非表示を行わないデモページ

解説

HTML

HTMLのポイントは特にないです。ulタグが入れ子になっているぐらいです。

CSS

CSSで必要な部分を解説します。

list-menuクラスは、メニューの表示領域です。後で説明しますが、表示するメニュー階層に合わせて高さが変わります。大事な部分は、「overflow: hidden;」を使って領域からはみ出した部分を非表示にしていることです。相対位置の基準にするため、「position: relative;」も指定します。

下層メニューを表すクラスです。下層メニューには「position: absolute;」を指定します。親要素を基準に表示領域分右にずらして配置しています。「transition: left 0.5s;」は、別回で説明したとおり、CSS Transitionsを使ったアニメーションの定義です。アニメーションの終点は「.menu-child.is-active」に定義して、javascriptでクラスを切り替えてアニメーションさせます。「left: 0;」とすることで、下層メニューが表示領域分左にずれるように動きます。

jQuery

スクリプト部分です。

このサンプルの課題

  • ドリルダウンメニューは下層メニューが一目で把握できないデザインのため、ユーザビリティ向上の工夫が必要。今回は下層メニューの数を親メニューに表示してみた。
  • 中間のメニューにいると、自分がメニュー階層のどこにいるか分からなくなるため、パンくずリストなどもう一つナビゲーションが必要になるかもしれない。あとどこまでメニューが続くか分からず不安になって使わなくなるユーザーも出てくるかもしれないので、パンくずリストよりはステップナビゲーションに近いUIが欲しいところ。

ドリルダウンメニューはそれ単体ではあまりいいナビゲーションとは感じませんが、何か別の目的のデザインと組み合わせて使うと面白いものができそうですね。

広告
  • LINEで送る