アコーディオンメニューは、数あるメニューUIの中で最もサンプルが多いように思います。しかし、レイアウトや動作がクロスブラウザで満足いくものはなかなか見当たりません。そこで今回は、クロスブラウザ,XHTML＆CSS valid なアコーディオンメニューの作り方を説明します。まず jQuery を使った必要最小限のコードで実装してから、順に仕上げていくことにします。
ページ内へのアンカーリンク <a href=”#hoge”> をクリックすると、通常は一瞬で移動するため、ページのどの辺りにいるのかわからなくなり、閲覧者を混乱させることがあるかもしれません。これを改善した、良くあるわかりやすいナビゲーションは、移動をスムースなスクロールで行うものです。スムーススクロールを簡単に実現するなら jQuery のみでもできますし、スクロール用のプラグインを使っても良いです。ここではその両方を紹介し、WordPressプラグインとして利用できるようにします。