ドロップダウン メニューは、インターネット上で最も一般的な効果の 1 つであり、クリックするかマウスを移動するだけで、Web ページ レイアウトのスペースを節約するだけでなく、Web ページ レイアウトを簡潔にし、より詳細なメニューを表示します。整然としていると同時に斬新でもあります。 美しいドロップダウン メニューは、Web ページに多くの色を加えます。
ドロップダウン メニューを作成するにはさまざまな方法がありますが、このコラムでは、好みに応じて独自のドロップダウン メニューを作成できるように、一般的に使用される 4 つの方法を紹介します。
■ Dreamweaver を使用してドロップダウン メニューを作成する
??Dreamweaver は、ドロップダウン メニューを作成するために最も一般的に使用されるツールであり、簡単な方法で最大限にメニュー スタイルを作成できます。
??Dreamweaver を使用してドロップダウン メニューを作成する原理は非常に簡単です。これは、[動作] パネルの組み込みの Show-Hide Layers メソッドを使用し、onMouseOver (マウスが移動) と onMouseOut (マウスが遠ざかる) を使用します。レイヤーの非表示と表示をトリガーすると、レイヤー内にメニューが表示されます。
??したがって、ドロップダウン メニューは 4 つの手順で作成できます。まず、ビューアの前面に最初に表示されるメイン メニューを配置するために使用されるナビゲーション バーが必要です。は非表示になった後に表示されます。次に、最も重要な手順は、メイン メニューとドロップダウン メニューにレイヤーの非表示と表示の効果を追加することです。最後に、メニューを美しくします。最終的な効果は図に示すとおりです。次のアドレスにアクセスすることもできます: menu.htm
??もう待ちきれないと思いますので、早速始めましょう！
1.ナビゲーションバーの制作
まず、必要な準備作業を行います。CTRL+J を押して [ページ プロパティ] ウィンドウを開きます。パラメータ設定は図 2 に示すとおりです。この設定はメニューの位置に影響するため、図のように設定してください。写真。
CTRL+F2 を押してオブジェクトパネルを開き、レイヤーボタンをクリックします。
最後に、マウスを押したままページ上でレイヤーをドラッグし、レイヤーの [プロパティ] パネルでパラメーターを設定します。 [レイヤー ID] ボックスにタイトルを入力し、[L]、[T]、[W]、および [H] ボックスに値を入力します。図に示すように、それぞれ 8、15、15 の場合は、背景色を #006699 で塗りつぶします。
カーソルをレイヤー内に移動し、オブジェクトパネルのテーブルボタンをクリックします。
、1行4列の表を挿入し、図のように設定します。
CTRL キーを押したままテーブルの 4 つのセルをクリックし、幅を 120 に設定し、最初の 2 つのセルにテキストを入力します。これは、私が使用したメイン メニューの名前です。 「Classic Forum」と「Tianji.com」を例としてリンクを追加しました。
2. ドロップダウンメニューの作成
ここで、レイヤーも使用して、ドロップダウンとして表示されるメニューの作成を開始します。
先ほど作成したナビゲーション バーの下に、[オブジェクト] パネルからレイヤーを再度挿入します。次のようにパラメーターを入力します。[レイヤー ID] ボックスに menu1 を入力し、L、T、W、および H ボックスに 8、34、120 を入力します。 、および 80 をそれぞれ #999966 で入力します。2 つのパラメータ L と T は、このレイヤーとウィンドウの左端と上端との間の距離を設定します。間違って入力しないでください。入力しないと、メニューが表示されます。置き忘れると完成後の使用感に影響を与えます。
この時点で、menu1 レイヤーに必要なメニューの内容を入力できます。レイアウトの都合上、ここでは今でも表を使ってメニューを作成しています。このレイヤーは「クラシック フォーラム」のドロップダウン メニューとして表示され、必要なメニュー リンクを入力します。同様に、「Tianji.com」のドロップダウンメニュー（レイヤーメニュー2）を作成します。
このステップで注意すべき点は、ドロップダウン メニューが配置されるレイヤー (menu1、menu2) の位置が非常に重要であるということです (2 つのパラメーター L と T によって決定されます)。 3 番目の手順を完了した後にメニューを正常に使用できるように、メニューの上端はナビゲーション バーの下端に近くなければなりません。ナビゲーション バーから離れると、マウスがナビゲーション バーから離れるとすぐにメニューが消えてしまうためです。
F2 を押して LAYER パネルを開くと、Web ページ内の 3 つのレイヤーがリストされます。menu1 と menu2 の前のスペースをクリックすると、目を閉じたアイコンが表示され、これら 2 つのレイヤーが非表示になります。このステップは、ドロップダウン メニューの初期状態が非表示であるために実行されます。
3. 表示効果と非表示効果を追加する
このステップは、衰退を魔法に変えるための重要なステップです。注意深くフォローしてください。
この手順は 2 つの部分に分かれています。1 つ目は、ナビゲーション バーのメイン メニューの表示と非表示を制御するコマンドを追加し、2 つ目は、ドロップダウン メニュー自体の表示と非表示を制御するコマンドを追加します。
1.ナビゲーション バー セクションで、まず CTRL キーを押したままナビゲーション バーの最初のセルをクリックし、Shift+F3 を押して [動作] ウィンドウを開き、 をクリックします。
ボタンをクリックし、ドロップダウン オプションで [レイヤーの表示/非表示] を選択します (図を参照)。オプションにそのような項目がない場合は、[イベントの表示] で [IE 5.0] を選択し、もう一度ボタンをクリックすると、[レイヤーの表示/非表示] が表示されます。
以下に示すように、ウィンドウがポップアップ表示されます。 [名前付きレイヤー] ボックスに、現在の Web ページのすべてのレイヤーがリストされます。menu1 レイヤーを「クラシック フォーラム」に応答させるため、「layer "menu1"」を選択します。次に、下の「表示」ボタンをクリックしてOKです。
この時点で、「動作」ウィンドウに戻り、以下に示すような単語がウィンドウに表示されます。「イベント」の下にある「onClick」というテキストをクリックすると、小さな下向き矢印が表示されます。それをクリックして、ドロップダウンで「onMouseOver」を選択します。ダウンオプション。この手順の目的は、マウスが最初のセルに移動したときに、ドロップダウン メニュー menu1 のステータスを [表示] に変更することです。
次の手順では、マウスが 2 番目のセルに移動したときにドロップダウン メニュー menu2 を非表示にします。
再度注文するボタンをクリックし、ドロップダウン オプションで [レイヤーの表示/非表示] を選択し、ポップアップ ウィンドウで [レイヤー "menu1" ] を選択します。これは、menu1 レイヤーを「クラシック フォーラム」に応答させるためです。次に、下の「非表示」ボタンをクリックしてOKです。
[動作] ウィンドウに戻り、小さな下向き矢印をクリックし、ドロップダウン オプションで [onMouseOut] を選択します。
2.ドロップダウン メニュー パーツで、まずレイヤーの端をクリックするか、[レイヤー] パネルで [menu1] をクリックしてレイヤー menu1 を選択し、ナビゲーション バー パーツと同じ方法を使用して、[動作] ウィンドウでそれ自体を表示および非表示にするコマンドを追加します。 。この結果、マウスがレイヤー menu1 の外に移動すると、レイヤー menu1 が自動的に非表示になります。最終階層menu1の状態は図のとおりです。
3．上記 2 つの部分を繰り返し、2 番目のメイン メニュー「Tianji.com」とナビゲーション バーのレイヤー menu2 のレイヤー コマンドを表示および非表示に追加します。
4. ドロップダウンメニューの美化と修正
この時点で、ドロップダウン メニューの機能効果が実装されており、F12 を押すとそれを確認できるようになります。ただし、メニューが少し見苦しく、フォントが十分に細かくなく、メニュー オプションのデフォルトのリンクの色が見栄えがよくなく、メニューに枠線がないこともわかるはずです。そこで、少し美しくしてみましょう。 。
1.メニューのフォント スタイルを定義するには、Shift+F11 を押して [CSS スタイル] パネルを開き、パネルの下をクリックします。
ボタン
図に示すように、ポップアップ「新しいスタイル」ウィンドウの「タグ」ボックスで td タグを選択し、2 番目の項目「タイプ」で「HTML タグの再定義」を選択し、「定義」で「このドキュメントのみ」を選択します。
このとき、設定ウィンドウが表示されるので、右側の [サイズ] ボックスで 12 を選択します。単位はピクセルです。
2.スタイル パネルで、パネルの下のボタンをクリックし、3 番目の項目 [タイプに CSS セレクターを使用] を選択し、[タグ] ボックスで a:hover タグを選択します。図に示すように、定義の場合のみ。
[OK] をクリックした後、ポップアップ ウィンドウで [色] に #ff9933 を入力し、[装飾] に [なし] を選択して、[OK] をクリックします。
スタイルパネルに戻り、パネルの下をクリックします。ボタンをクリックし、ポップアップ ウィンドウで 3 番目の項目 [タイプ] に [CSS セレクターを使用] を選択し、[タグ] ボックスで a:link タグを選択し、[定義] で [このドキュメントのみ] を選択します。
[OK] をクリックした後、ポップアップ ウィンドウで [色] に #ffffff を入力し、[装飾] に [なし] を選択して、[OK] をクリックします。
スタイルパネルに戻り、パネルの下をクリックします。ボタンをクリックし、ポップアップ ウィンドウで 3 番目の項目 [タイプ] に [CSS セレクターを使用] を選択し、[タグ] ボックスで a:visited タグを選択し、[定義] で [このドキュメントのみ] を選択します。
[OK] をクリックした後、ポップアップ ウィンドウで [色] に #ffffff を入力し、[装飾] に [なし] を選択して、[OK] をクリックします。
3．スタイル パネルでメニューの境界線のスタイルを定義し、ポップアップ ウィンドウでパネルの下のボタンをクリックし、タグ ボックスで td タグを選択し、2 番目の項目の [タイプ] で [HTML タグの再定義] を選択し、[定義] で [このドキュメントのみ] を選択します。図に示すように。
設定ウィンドウが表示されるので、左側のリストでBorderを選択し、右側の4辺の幅を1と入力し、色を黒#000000に設定し、スタイルとしてソリッドを選択します。
この時点では成功です。今すぐウェブページで使用してください。