アコーディオンメニューは、数あるメニューUIの中で最もサンプルが多いように思います。しかし、レイアウトや動作がクロスブラウザで満足いくものはなかなか見当たりません。そこで今回は、クロスブラウザ,XHTML＆CSS valid なアコーディオンメニューの作り方を説明します。まず jQuery を使った必要最小限のコードで実装してから、順に仕上げていくことにします。
ページ内へのアンカーリンク <a href=”#hoge”> をクリックすると、通常は一瞬で移動するため、ページのどの辺りにいるのかわからなくなり、閲覧者を混乱させることがあるかもしれません。これを改善した、良くあるわかりやすいナビゲーションは、移動をスムースなスクロールで行うものです。スムーススクロールを簡単に実現するなら jQuery のみでもできますし、スクロール用のプラグインを使っても良いです。ここではその両方を紹介し、WordPressプラグインとして利用できるようにします。
横幅がキャプション（リンクテキスト）に応じて伸縮するボタンを、CSSのみ・ボタン用画像1枚だけ、で実現する方法をまとめます。これは、海外で scalable button，fancy button，sexy button，sliding doors 等と呼ばれているテクニックです。簡単に言うと「a タグに span タグを入れ子にして、それぞれの背景でボタンの左端からと右端からを表示する」となります。言うのは簡単ですが、クロスブラウザで実現するには細かなテクニックが必要です。さらに、ボタンの状態に合わせてボタンの画像を変更するテクニックも説明します。