DIV ドロップダウン メニュー (2)
著者：Eve Cole
更新時間：2009-06-20 17:00:56
このプログラムは、<head></head> タグの間、または Web ページ上の任意の場所に配置できます。
次に、実際のメニュー項目を定義する必要があります。ここでは、各メニュー項目にマウス移動イベント (OnMouseOver) ハンドルを追加し、このイベントで上で定義した Show 関数を呼び出す必要があります。つまり、マウスがメニュー項目に入るとすぐに、show 関数が実行を開始します。ここでは、各メニュー項目の ID 番号を定義し、そのドロップダウン メニュー列の ID 名を Show 関数に渡す必要もあります。これは、ドロップダウン メニュー列を制御するために重要です。メニュー項目の ID 名を HTML 構文で説明します。
<テーブルボーダー=0>
<tr>
<td ID="d1" onmouseover="show(this,ds1);" class="menu">マガジン テクノロジー サイト</td>
<td ID="d2" onmouseover="show(this,ds2);" ポータル</td>
<td ID="d3" onmouseover="show(this,ds3);" 個人的なお気に入りサイト</td>
</tr>
</テーブル>
最後に、ドロップダウン メニューの列を定義する必要があります。ドロップダウン メニューの列ごとに、サブメニューの CSS 属性と ID 名を指定して、Show 関数で制御できるようにする必要があります。最後に、デフォルトの表示モードを none に設定します。これは、表示モードが表示されないことを意味します。表示されます。これは、表示スタイルに「なし」を割り当てることで実現されます。以下に、ドロップダウン メニュー列の HTML 構文の説明を示します。
<DIV ID="ds1" CLASS="サブメニュー" STYLE="display:none">
<BR><A HREF="http:\www.yesky.com">tianji.com Yesky.com</A>
<BR><A HREF="http:\www.cbinews.com">コンピュータ ビジネス情報</A>
<BR><A HREF="http:\www.newsoft.com.cn">新しいファッション エレクトロニクス</A>
<BR>
</DIV>
<DIV ID="ds2" CLASS="サブメニュー" STYLE="display:none">
<BR><A HREF="http:\www.sina.com.cn">シナシナ</A>
<BR><A HREF="http:\www.sohu.com.cn">ソーフソーフ</A>
<BR><A HREF="http:\www.163.com">ネットイース</A>
<BR>
</DIV>
<DIV ID="ds3" CLASS="サブメニュー" STYLE="display:none">
<BR><A HREF="http:\haoel.yeah.net">マウス ネットワーク プログラミング ステーション</A>
<BR><A HREF="http:\www.5460.net">中国人のクラスメート</A>
<BR><A HREF="http:\www.csdn.net">中国ソフトウェア開発ネットワーク</A>
<BR>
</DIV>
以上の 4 つの手順で、メニューを Web ページに表示できるようになります。もちろん、メニューのプロパティを自分で変更して、よりメニューらしくすることもできます。
