it-mall準備ブログ

IT、ICTに関するWebサイトの準備の様子を綴ってます

ドロップダウンメニュー実装の進め方

まず、横並びのドロップダウンメニューを下記の手順で目指す。

予定通りに進まない場合は適宜方針を見直す。

縦並びおよびポップアップの手順はこれの成果を踏まえて改めて決める。

1.liを3階層にしてメニューで表記する文字列を記述する。

  この時文字列の長さにはバラツキを持たせる。

2.cssでこの最上位階層だけ横並びに表示させる

3.それぞれの幅は表示文字列に合わせて自動的に決まるようにする。

  あるいは任意の幅を指定する。

4.マウスが乗った時に色が変わり、子が表示されるように設定する。

  この時、子は親の下に縦並びで表示されるが親に対してに少し右に寄る。

5.マウスを子に移動したらその色を変える設定をする

6.その子に更に子があれば表示する設定をする

  この時、子は親の右側少し下から縦並びで表示される。

7.子の子にマウスが乗ったら色を変える設定をする

8.子や子の子がある場合はそれを知らせるマーク(>など)を表示する

9.メニュー項目をクリックすると関数が呼ばれるように設定する

  その関数は項目ごとに別の関数とする

10.メニュー項目からマウスが外れると以前の表示に戻る