jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2015.1.29

hashで制御する動的UIの実装 - 開閉式メニューの場合

Category:
Tips

前回、「非同期ページ遷移の古典的手法 - データバインディングにhashを利用する」という記事を書きました。

「非同期のコンテンツなんてゼロからそうそう構築しない」という人もいるでしょうが、サイト全体ではなくページの一部ではこの手法を取り入れる余地があるかもしれません。

今回は、スマホサイトではよく見かける「開閉式メニュー」を例に、hashを使ってUIを制御する方法を試してみたいと思います。

開閉式メニューのサンプル

以下は実際操作できるサンプルです。

See the Pen Basic Slide Menu by ykob (@ykob) on CodePen.

結果だけ見ると何の変哲もない開閉式メニューですが、以下の点に留意して設計されています。

  • ボタンのクリックで変更されるのは、メニューの開閉状態を示すhashのみ。
  • hashの切替をsetIntervalで監視し、変更があった場合にコンテンツを外包するdivのclassを切り替える。
  • JavaScriptで操作するのはその2つのみ。アニメはcss3 transitionに依存している。

今回のサンプルコードに用いた設計のメリット

このような設計によるメリットはいくつか考えられます。 前回触れた内容と重複する点が多いですが、あらためて具体的に挙げていきます。

  • 状態の管理をhashで行っているので、ページを読み込む際のURIに予め指定のhashをつけておけば、UIの初期状態を任意に変更できる。
  • 同じ理由によりブラウザに履歴が残るので、動的UIの制御をブラウザの「戻る」「進む」にも対応させられる。
  • アニメーションを含めた外観の管理をcssのみで行える。

といったところでしょうか。

まとめ

開閉式メニュー以外にも動的UIをいくつか同ページ内に実装したい場合などは、JavaScirptのコードの細分化だけでなく、cssも含めて役割分担をはっきりさせておいたほうが運用も改修も楽になります。

データバインディングはウェブアプリケーションの開発のみならず、ほぼ静的なウェブサイト制作においても利用する余地がある手法です。
最近では国内でも、スマホサイトのみならずPC向けサイトでもcss3の演出を使用できるシーンが増えてきたように実感していますので、もしそのような業務を任された際には、今回取り上げた手法を使ってみてはいかがでしょうか。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.