ドロップダウンメニューの要件をまとめてみる。
最終的には企画中の開発ツールを使って、
Webアプリケーションの仕様書から自動で生成することを考えているので
それを念頭に置いて考える。
・メニューでの表記とクリック時に呼び出す関数を定義したデータを用意する
・その表記に必要な幅を自動で設定するもしくはできなければ定義に含める
・その他並べ方や位置などその他の必要な項目も定義に含める
・定義に従ってhtmlやcssを静的または動的に生成する
ドロップダウンメニューそのものについては
・マウスをオーバーラップさせるだけで子項目が表示される
・子項目は兄弟は同じ幅とし最大の幅を必要とする子に合わせて適切な幅とする
・子項目がその子項目を持っている場合はそれを表す印を表示する
・フォーカスが当たっている親、子、孫・・・の項目はわかりやすく色を変える
今回の作業は、メインメニュー用に横並び、サイドメニュー用に縦並び、
ポップアップメニュー用に移動、開閉ができるものの３つを
静的ファイルとして作成するところまでとする。
よって自動生成の部分は実装しないが
メニューの定義を記したテキストファイルを作成した上で、
それに従って手でhtml、cssをコーディングすることにより
定義に過不足があれば修正しながら行う。
