上の例のプルダウンメニューは、DreamWeaver の Spry 機能を使用したもので、孫メニューまで作ることができる。 ＣＳＳ、JavaScriptは、ともに別ファイル（SpryMenuBarHorizontal.css ／ SpryMenuBar.js）で扱っています。
実際の使用例は→ ここ
DreamWeaver CS3 での使用法
- 編集画面で 挿入 → Spry → Spryのメニューバー で指定場所に挿入できる。
- 左右の位置決めは難しく、あらかじめ数列の表を作り、そのセルの中に入れて隣のセル幅で調節するといい。
- メニューのサイズや色はSpryMenuBarHorizontal.cssで指定する。この指定は編集画面からできるが窓が小さくで分かりにくい。 SpryMenuBarHorizontal.css を直接エディタで変更するといい。
- SpryMenuBarHorizontal.css の各変数の意味をコメント行で入れておけば後日の変更に役立つ。
このページに使用しているcssファイルにも日本語コメントをいくつか入れた。
- メニューのサイズや色を指定する SpryMenuBarHorizontal.css はデフォルトでは共有で使用されるから、個別ページごとに変えたい場合はこのcssファイルをコピーして使用する。
- リンク先ページにもこのメニューを共通に表示させるには、各ページごとにこのメニューを置く必要がある。
- その場合、共有の宣言があるから、メニューの Copy & Paste は面倒。 モデルページをリンク先フォルダーに（リンク変更して）保存。
- 本文をここに Copy & Paste する。 即ち、本文のほうをメニューページに Copy & Paste するとよい。
- このCSSの場合、各ボタンの幅、色などの仕様は同一で、ボタンごとに変えることはできないようです。
- 幅を指定すると皆同じ幅になる。 長い文字列に合わせて幅を長く指定すると間延びボタンとなる。
- 文字大きさはＣＳＳで指定する。 編集画面で指定するとブラウザによってはレイアウトが崩れるから注意。
- 短い幅に長い文字を入れると、ボタン内で改行されて縦幅が拡大されたり、末尾が消える。 その場合はCSSで文字サイズを小さくする。
- 高さはボタンごとに文字の大きさで自動指定または数値設定する。
- このメニューはフレームと共用すると隣のフレームに重なり表示不全となるのでフレームと共用できない。
- サイト上には「プルダウンメニュー」の作り方が数多く紹介されているが、ブラウザのVersion によって見えなかったりするので要注意（ 例 ）。
トラブル対処
・Html ファイルは、ソースを見れば分かるように、ul、li、の羅列で単純なリスト表である。
・参照するＣＳＳファイル：SpryMenuBarVertical.css（垂直型）、SpryTabbedPanels.css（水平型） ともに単純な構造になっている。
したがって、編集でエラーメッセージが表示されて続行できなくなった場合はHtml ファイルのリスト表を修正するか、あるいはＣＳＳファイルを新しく入れ替えると解決する。
本例の場合、プルダウン表示にならなかった時、別に作成した新ＣＳＳファイルと入れ替えたら解決した。
ネットでの紹介例
DreamWeaver Spry機能の他にもネット上で、JavaScript と、CSS を併用した自由度の高いプルダウンメニューが紹介されている。
｜ ＣＳＳについて ｜ DreamWeaver の Spry 機能 ｜ ホームページ作成体験 ｜
|