DIV ドロップダウン メニュー (1)

これは非常に単純なメニューですが、この例から CSS と JavaScript に関する関連知識を学ぶことができ、ドロップダウン メニュー作成の原則と基本を理解するのに非常に役立ちます。この例では、ドロップダウン メニュー列として DIV タグを使用し、メニュー ヘッダーとして TABLE を使用しました。原理は、マウスの動きを識別してドロップダウン メニュー列の表示属性を切り替えることです。
この DIV メニューの効果は次のとおりです。ページ上の空白部分をクリックすると、ドロップダウン メニューの表示をキャンセルできます。

雑誌テクノロジーサイト ポータルサイト 個人コレクションサイト

Yesky.com
パソコン販売店情報
流行のエレクトロニクス

シナ
蘇胡蘇胡
ネットイース ネットイース

マウスネットワークプログラミングステーション
中国人同級生の記録
中国ソフトウェア開発ネットワーク

よ

とにかく、このメニューの作り方を段階的に学びましょう。ステップバイステップ、いきましょう。
最初のステップは、メニュー項目とメニュー列の CSS カスケード スタイル シートを定義することです。CSS の意味がわからない場合は、「Computer News Website」の CSS に関するチュートリアルを参照してください。 2 つの CSS クラスを定義します。1 つは Meun で、もう 1 つは SubMenu です。Menu はメニューの上部に表示されるスタイルを定義し、Submenu はドロップダウン メニュー列の表示スタイルを定義します。ここで注意する必要があるのは、サブメニューの「position:absolute;width:200」CSS 属性です。これは、サブメニューを表示する位置を決定するために必要です。他の CSS プロパティはオプションです。以下は、これら 2 つの CSS クラスの説明です。Web サイトの または の間に次の段落を挿入できます。

<スタイル>

2 番目のステップでは、ドロップダウン メニュー列の表示と非表示を切り替えるための Javascript コードを見てみましょう。このコードは非常にシンプルで、JavaScript を少し学んだ人なら誰でも簡単に理解できるはずです。 Javascript がわからない場合は、「Computer News Website」の JavaScript に関する記事も参照してください。このコードの意味は、マウスがメニュー要素 (Menu) に入ると、そのドロップダウン メニュー列が Show と呼ばれる関数によって表示されることです。この Show 関数の主な機能は、現在のドロップダウン メニュー列を表示し、他のメニュー列を非表示にし、現在表示されているメニュー項目を変数 cm に入れることです。さらに、ここでは、Web ページ上でマウスをクリックすると、すべてのドロップダウン メニュー列が非表示になる、単純なマウス クリック イベント (onclick) ハンドラーも追加しました。以下に、ドロップダウン メニュー列の表示位置を取得するために使用される getPos という関数を含む Javascript プログラム全体を示します。

<スクリプト>
varcm=null;
document.onclick = new Function("show(null)")
関数 getPos(el,sProp)
{var iPos = 0
while (el!=null)
{iPos+=el["オフセット" + sProp]
el = el.offsetParent}
iPo を返す}
関数 show(el,m)
{if (m) {m.style.display=' ';
m.style.pixelLeft = getPos(el,"左")
m.style.pixelTop = getPos(el,"Top") + el.offsetHeight}
if ((m!=cm) && (cm)) cm.style.display='none' cm=m }