QQ を使用してチャットしたことのある友人は皆、ウィンドウを新鮮でクリーンでダイナミックに見せることができるその自動ウィンドウ非表示機能を気に入っています。私の友人の何人かは、自分の Web ページに同様のものを追加したいと考えており、共同で調べた結果、これを発見しました。 Dreamweaer を使用してこの効果を実現できます。アクティブなメニュー バーの作成を見てみましょう。
ステップ 1: メニューの外観を作成する
図 1
Dreamweaer で新しいファイルを作成し、レイヤーを描画し、レイヤーにテーブルを挿入し (図 1)、テーブルを変更してからメニュー項目を追加し、各項目へのハイパーリンクを作成します。ハイパーリンクの下線を削除するには、 CSSスタイルパネルで、CSSセレクターで「リンク」と「ホバー」の「装飾」を「なし」に設定し、「ホバー」の「色」を設定します。 )」が赤に設定され、最後に設定したスタイルが各メニュー バーに適用されます (「F12」キーを押すと効果をプレビューできます)。
ステップ 2: メニューの動的効果を設計する
1. レイヤーを選択し、マウスが「十字」の形になったら左ボタンを押したまま、レイヤーをページの右上隅にドラッグします (メニュー全体がバーは完全に露出していますが、上端はページ境界線のすぐ近くにあります)、ウィンドウ メニューでタイムライン パネルを開き、レイヤーを選択してタイムラインにドラッグすると、Dreamweaer によって長さ 15 フレームのアニメーション オブジェクトが自動的に生成されます。アニメーション オブジェクトの最後のキーフレームを 30 番目のフレームにドラッグし、長さを 30 フレームに設定します。次に、フレーム 15 を右クリックし、ポップアップ ショートカット メニューで [キーフレームの追加] オプションを選択してキーフレームを挿入し、レイヤーを適切な位置にドラッグします (図 2)。タイムライン ウィンドウのフレーム 15 で再度右クリックし、ポップアップ ショートカット メニューから [アクションの追加] を選択すると、Dreamweaer によってフレームにインタラクティブな動作が自動的に開きます。動作パネルの「+」ボタンをクリックし、ポップアップメニューから「タイムライン/タイムラインの停止」を選択し、「タイムラインの停止」ダイアログボックスを開き、「Timeline1」を選択して「OK」ボタンをクリックしてダイアログボックスを閉じます。 。インタラクティブビヘイビアのイベントは「onFrame15」、アクションは「タイムラインの停止」となっており、タイムラインが15フレーム目に達するとアニメーションの再生が停止し、メニューバーのバウンス機能を実現しています。
図 2
2. 同じ方法を使用して、タイムラインの 30 フレーム目に「タイムラインの停止」インタラクティブ動作を追加し、メニュー ポップアップ機能を実現します。これら 2 つのインタラクティブな動作を追加すると、タイムライン ウィンドウの対応するフレームにインタラクティブな動作を表す青い四角形が表示されます。 「自動再生とループ」チェックボックスを選択すると、アニメーションが自動的にループするようになります (図 3)。
図 3
3. 次に、タイムラインが停止した後も再生を継続できるように動作を設定する必要があります。私のアイデアは次のとおりです。通常の状態では、メニュー バーはポップアップしますが、その下に「Campus Grand View」という文字だけが残り、メニュー バーのポップアップとリバウンドはマウスが「Campus Grand View」上を通過するかどうかによって制御されます。メニューバーの「表示」をクリックします。次のように続行できます。メニュー バーで「Campus Grand View」という単語を選択し (この単語のハイパーリンク アドレスが「#」、つまり空のリンクであることを確認してください)、動作パネルの「+」ボタンをクリックします。をクリックし、ポップアップでメニューから「タイムライン/タイムラインの再生」を選択し、表示されるダイアログボックスで「タイムライン1」を選択してOKボタンをクリックすると、ビヘイビアーパネルにビヘイビアが追加されます。 [イベント] ドロップダウン リストで [onMouseOver] イベントを選択します。これは、マウスが単語の上にあるときにアニメーションが再生されることを示します (図 4)。
図 4
この時点で、アクティブなメニュー バーが完成します。 「F12」キーを押すと、その効果をプレビューできます。
ただし、このメニュー バーには欠点が 1 つあります。メニュー バーの下の特定の領域 (この場合は「キャンパス グランド ビュー」という文字) をマウスが通過するとメニュー バーが消えなければなりません。メニュー バーをポップアップ表示させたい場合は、クリックするだけです。メニューを非表示にするには、マウスをメニュー バーから遠ざけます。Fireworks または Flash を使用する必要がある場合があります。何か良い方法があれば、私たちに相談してください。