シンプルロールオーバーのボタンにプルダウン

◆紹介するボタンの種類◆

シンプルロールオーバー

シンプルロールオーバー
2パターンの変化
  • 初期状態
  • マウスを乗せた時

ロールオーバー

ロールオーバー
4パターンの変化
  • アップ (初期状態)
  • オーバー (マウスを乗せた時)
  • ダウン (クリックした後の表示)
  • オーバーダウン (ナビゲーションバーでダウン状態)

プルダウン

これまでロールオーバーのボタン、シンプルロールオーバーのボタンを学習してきました。
このページでは、テキストになかったプルダウンの設定方法を説明します。
Fireworksでは、作ったボタンにプルダウン機能を簡単に付ける事ができます。
サイトの内容で、紹介したい事が多い場合、項目訳にすると、わかりやすいので、そんな時にお勧めです。
ここでは、予め作成したシンプルロールオーバーのボタンにプルダウン効果を付けています。
※シンプルロールオーバーのボタンの作成方法はfireworksのテキストP86ページを参照してください。

Chrome007 このボタンは、Fireworksのスタイルのパネルから、クローンの中の
Chrome007を使用してます。
Chrome006 ロールオーバーの効果に、同じくスタイルのパネルからChrome006を使用し、
透明度を30にしてChrome007に重ねて使用しています。
Chrome006透明度30 透明度を下げることで、重ねた下の画像が見えなくなる事を防いでいます。

◆プルダウン設定の方法◆

ビヘイビアのパネルを
開き、「+」を
クリックします。

ビヘイビアを追加

ポップアップメニューの設定を選択します。

ポップアップメニューエディター

ポップアップメニューエディターが開きます。

テキストの項目に
必要な内容を記入して
いきます。

ポップアップメニューエディター内容

記入して追記する時は
「+」をクリックして
「メニューを追加」
していきます。

ポップアップメニューエディター外観

外観では、
フォントのサイズ
書体
スタイル
行揃えの指定
文字の色
セルの背景色を
設定できます。

ボタンに合うように、
または個性的に、
自由に設定してください。

ポップアップメニューエディター詳細

詳細では、
セルの幅
セルの高さ
セルの余白
セルの間隔
の指定ができます。

またポップアップ境界線の
表示
境界線の色
影やハイライトの
指定ができます。

見やすいように
設定してください。

ポップアップメニューエディター位置

位置では
マウスを乗せた時に
メニュー項目が
どの位置に表示されるか
設定することができます。

プルダウンさせたい位置を
好きな位置に
ドラッグして
指定することもできます。

一階層下の項目は
一文字分 内側に
表示されます 。

TOP戻る