シンプルなプルダウンメニューの作成

サンプルを見る

■シンプルなプルダウンメニューの作成
まず、パレットからレイヤーアイコンをページ上にドラッグドロップします。

次にパレットからレイヤー内に画像アイコンをドラッグドロップします。


メニュー画像(マウスが乗ったらプルダウンメニューを表示する部分)を選択します。
 画像インスペクタ上の「基本」タブ内にある「参照...」ボタンをクリックします。
画像ファイルを選択します。
画像が表示されます。
レイヤーを選択します。枠をクリックすると選択できます。
フローティングボックスインスペクタが表示されるので、奥行きの部分に2を入力します。
パレットからレイヤーアイコンをページ上にドラッグドロップします。
先ほど配置した画像の下に表示されるようにレイヤーを移動させます。上または左側の枠部分をつかんで移動させます。
移動したレイヤー内に画像アイコンをドラッグドロップします。
 プルダウンメニューで表示される画像を選択します。
 画像インスペクタ上の「基本」タブ内にある「参照...」ボタンをクリックします。
画像を選択します。
画像が表示されます。
この画像にリンクをはります。リンクの指定方法に関してはリンクの設定ページを参照してください。
メニューの数だけ同様に画像を配置しクリック後のリンク先を指定しておきます。
プルダウンメニューで表示されるレイヤーのサイズを調節します。ぴったりおさまっている場合は何もしなくて構いません。
メニューよりもサイズが大きい場合は、レイヤーを選択し右下の■(ハンドル)をドラッグして調節します。表示内容より小さくできませんのでボタン上に重なるほど移動させてマウスボタンを離すと楽です。
レイヤーサイズがプルダウンメニューと同じサイズになります。
フローティングボックスインスペクタで名前を入力します(英数字)。次に奥行きを指定します。2と入力します。数値が大きいほど手前に表示されます。
最初はプルダウンメニュー部分は表示されませんので「表示」のチェックマークを外します。
表示のチェックマークを消すとレイヤー内容が見えなくなります。
パレットからレイヤーアイコンをページ上にドラッグドロップします。
画面サイズと同じだけ大きくします。
フローティングボックスインスペクタ上で名前と奥行きを入力します。名前は英数字で、奥行きは1を入力します。
一番最後に配置したレイヤー内に画像アイコンをドラッグドロップします。
画像インスペクタが表示されるので「参照...」ボタンを押します。
全面透明な画像を選択します。
画面いっぱいに大きく広げます。
リンクボタンを押してリンクさせます。
画像インスペクタが表示されるので「詳細」タブをクリックします。
境界線の部分にチェックマークを入れます。
次にリンクのタブを押します。
URLの欄に#を入力します。
アクションタブをクリックします。イベントで「マウスを合わせる」を選択後、アクションの文字の横にある+ボタンを押します。
アクションから「Multimedia」→「ShowHide」を選択します。
フローティングボックスで表示されるプルダウンメニューの名前を選択します。
モードは「非表示」を選択します。
ボタンをクリックして選択後、リンクさせます。
画像インスペクタが表示されるので「詳細」タブをクリックします。
境界線の所にチェックマークを入れます。
アクションタブをクリックします。
イベントで「マウスを合わせる」を選択し、アクションの文字の横にある+ボタンを押します。
アクションから「Multimedia」→「ShowHide」を選択します。
フローティングボックスでプルダウンメニューの名前を選択します。
モードは「表示」を選択します。



以上で完成です。