Drop Down Menu (Pull Down Menu と基本機能は同一) 安倍 2010/10/8 改定
     
   
     

サイトのリンク先から入手しものを、Htmlで加工し易いように全体のDIVを削除、表枠を挿入した。
DreamWeaver Spryと同じく、JavaScriptとcssを併用。 メニュー項目は追加可能。コード編集で追加すればよい。
ただしSpryとの違い:

・各ボタンが 図形、テキスト、両者が使える。 → テキストボタン例
 ただし、サブメニューは図形ボタンにしないとテキスト背景が透明になり見にくく、かつ位置がずれる。→ 
・各ボタンごとのサイズ幅変更はできないようだ。1つだけ大きくすると右側内に隠れたり、他のボタン間に隙間ができたり、改行されたりする。
 図形ボタンの場合、ボタン幅サイズは、本文内の図形widthと、navi / DropDownMenu.css のwidth(初期値100)で調整する。
 +10程度は本文内widthで調整できる場合あり。
 ボタン全体の枠幅を調整して、改行防止、全体の位置決めをする。

・図形およびテキストの半透明処理が可能。 (navi / DropDownMenu.css で設定。初期値opacity不透明度90%)
  ただし、テキスト背景の半透明はできない。

・ネット上には数多くのプルダウンメニューが紹介されているが、メインメニューと、サブメニューのセットの仕方がそれぞれ異なる。
 Spry の場合は、メインメニューのみをまず一括記述するから各ボタンごとのサイズ変更はできない。

・CSSのみのプログラムではIEのVersion によっては見えない場合があるようだ。

ファイル構成:

・下層folder:img、js、css、navi の4つはこのdropdown メニュー用である。内、js、css、navi内は変更不要。
この例ではイメージボタンを使用しているので面倒だが、大きさ、形状、フォントサイズの選択が自由にできる大きな利点がある。

一方、DreamWeaver ではdropdown(pulldown) メニュー はテキストに限られる。
ボタン編集は全て本文コード編集で行う。コードの#にリンク先URLを記入。
onMouse の画像名は、OFF画像名に _o を付加すれば、自動で処理される。例:abc.gif → abc_o.gif
本文内コードには _o のファイル名の記述はない。
ボタンは隣と密接するので初期表示ボタンのみ右端境界に点線(コロン8pt3つ)を上書き。
・css/style.css は本文の文字スタイルにつき不要。 → style.css 削除例
Flash と併用する場合
DreamWeaver ではFlashが前面になり、dropdown メニューが隠れてしまうのでdropdown メニューとFlashの併用には大きな制約がある。→サンプル
 この問題は、Layer の順番を変えてもダメ。Ver.CS3 に新たに導入されたFLASH記述を削除してもダメ。
DreamWeaver で挿入保存後、Homepage Builder で読み込み自動修正後保存してもダメ。
ただし、
静止画像では画像が背面になり問題はない。

 解決策1 Homepage Builderを使用

Homepage Builder でFLASHを挿入すると、Flash画像が背面になるので、dropdown メニューが隠れる問題はない。→サンプル
ただし、編集画面はレイアウトが崩れて編集しにくい。
このファイルをDreamWeaverCS3で読み込み、FLASHをDreamWeaverCS様式に変換した場合も問題なし。→サンプル
そして、編集画面のレイアウトが崩れることもない。
すなわち、Flashを挿入する工程だけを、Homepage Builder を使用すれば、dropdown メニューが隠れる問題はなく、
かつ、編集画面のレイアウトが崩れることもない。推薦


 解決策2 
DreamWeaverのみを使用
DreamWeaverを使用する場合の対応策がネット上に紹介されている。 下記サイトからダウンロード → サンプル
http://exyz.cocolog-nifty.com/good_sleep/2007/10/flash_acfa.html

swf 挿入のコードが異なり、別途js/swfobject.js が加わる。
ただし、この方法はブラウザ閲覧では問題ないが、DreamWeaverでの編集画面ではレイアウトが崩れるようだ。
また、メニュー数を増やすとレイアウト調整にサブルーチンの css ファイルの修正が必要で、この修正の説明がないので
レイアウト調整が難しい。推薦せず


すなわち、解決策1で、Homepage BuilderでFLASHを挿入し、その後DreamWeaverで編集する方法がよいようだ。


 

inserted by FC2 system