ホームページ >ウェブフロントエンド >jsチュートリアル >ユニバーサルセカンダリメニューコード (CSS JavaScript)_ナビゲーションメニュー

ユニバーサルセカンダリメニューコード (CSS JavaScript)_ナビゲーションメニュー

WBOYオリジナル: 2016-05-16 18:51:032054ブラウズ

] ただし、「CSS セカンダリメニュー」では、第 1 レベルのメニューのハイパーリンクが # の場合、第 1 レベルのメニューをクリックする限り、この第 1 レベルのメニューに対応する第 2 レベルのメニューが常に表示されます。 Web ページを隠すことはできません。小さなバグです。
よく考えてみると、実際、どのような第 2 レベルのメニューであっても、原則は同じです。
1. 各第 1 レベルのメニューはレイヤーに対応し、このレイヤーに配置されます。第 1 階層メニューに対応する第 2 階層メニューです。
2. デフォルトでは、セカンダリメニューレイヤーは非表示になります。これは、CSS でレイヤーの表示属性値を none に設定することで実現できます。
3. 第 1 レベルのメニューにマウスを置くと、対応する第 2 レベルのメニューレイヤーが表示されます。これは、CSS でレイヤーの表示属性値をブロックに設定することで実現できます。
4. マウスを第 1 レベルのメニューから遠ざけると、対応する第 2 レベルのメニュー層が非表示になります。
5. もちろん、マウスが第 1 レベルのメニューから第 2 レベルのメニューに移動した場合、第 2 レベルのメニューを非表示にすることはできません。したがって、第 2 レベルのメニューについても、 when に設定する必要があります。マウスがその上にあると、現在のレイヤーが表示され、マウスを離すと非表示になります。
基本的なアイデアができたので、2 番目のメニューの作成を開始できます。
まず、すべての第 1 レベルのメニューと第 2 レベルのメニューを含むレイヤーを作成します。このレイヤーを作成する理由は、メニュー全体をメニューレイヤーに表示したい、メニューを右側に表示したいなどの設定を簡単にするためです。
コードは次のとおりです。

コードをコピーしますコードは次のとおりです。

 >

次に、この第 1 レベルのメニューを直接ハイパーリンクにすることも、span または div にすることもできます。第 1 レベルのメニューは単なるハイパーリンクではないのかと疑問に思う人もいるかもしれません。確かにそう言えますが、span または div にハイパーリンクを適用することもできます。span または div を使用することには別の利点があります。この利点については後で説明します。

コードをコピーコードは次のとおりです:

🎜 >

3 番目のステップは、以下に示すように、メニューレイヤーに 2 番目のメニューレイヤーを追加することです。

コードをコピー

コードは次のとおりです:

サブメニュー 1

< a href="#">サブメニュー 1
サブメニュー 2 >

セカンダリメニューレイヤーをメニューレイヤーに配置する必要があるのはなぜですか?これにより、セカンダリメニューレイヤーの位置を簡単に設定できるためです。

4 番目のステップは、CSS を使用して 2 番目のメニューレイヤーの位置を設定することです。一般に、CSS のposition 属性は、レイヤーの位置を設定するために使用されます。この属性の一般的な値には、相対、絶対、固定が含まれます。このうち、absolute は、このメソッドを使用してレイヤーの位置を設定する場合、レイヤーは全体に基づいて配置されるため、ブラウザーウィンドウのサイズが変更されると、レイヤーの位置も変わります。「変更」は相対的な位置を意味し、この「相対的」とは、スクロールバーをどのようにドラッグしても、ブラウザウィンドウの上部から 10 ピクセル離れた位置にあると仮定します。レイヤーはブラウザウィンドウの上部から 10 ピクセル離れたところに表示されます。つまり、常にブラウザウィンドウに表示されます。 Relative は相対的な位置決めでもあります。この相対的な位置決めは、このレイヤーの元の位置に対して相対的なものになります。相対モードでは、ブラウザは最初にレイヤーの位置を出力し、次にこのレイヤーの位置を基準にしてオフセットします。これが、2 番目のメニューレイヤーをメニューレイヤーに配置する理由です。セカンダリメニューレイヤーが生成されると、以前の位置を基準にしてオフセットすることしかできないため、ブラウザウィンドウがどのように変化しても、レイヤーの位置には影響しません。セカンダリメニューレイヤーの位置が異なるため、以下に示すように、セカンダリメニューレイヤーごとに異なるオフセットを設定する必要があります。

コードをコピー

コードは次のとおりです:

メニュー 2
サブメニュー 1

>サブメニュー 2

上記のコードでは、 CSS の display はレイヤーを非表示にするように設定し、position はレイヤーを元の位置に対してオフセットするように設定し、left と top はオフセットを設定し、width はレイヤーの幅を設定します。もちろん、必要に応じて、フォントサイズなどの他のプロパティも設定できますが、詳しくは説明しません。ここで、第 2 レベルのメニュー層が第 1 レベルのメニューから離れすぎてはいけないことに注意してください。以前紹介したように、マウスが第 1 レベルのメニューから第 2 レベルのメニューに移動する場合、第 2 レベルのメニュー層を非表示にすることはできません。第 1 レベルのメニューが第 2 レベルのメニューレイヤから遠すぎる場合、マウスを第 1 レベルのメニューから遠ざけただけで第 2 レベルのメニューレイヤが非表示になり、第 2 レベルのメニューの目的が無効になります。メニュー。したがって、マウスが第 1 レベルのメニューから第 2 レベルのメニューレイヤに移動するときに、第 2 レベルのメニューレイヤが非表示になる時間がないことを確認する必要があります。これには 2 つのテクニックを使用する必要があります。この例に示すように、第 1 レベルと第 2 レベルのメニューレイヤーは第 1 レベルのメニューから離れすぎてはなりません。マウスが第 1 レベルのメニューから第 2 レベルのメニューに移動します。第 2 メニューがオンの場合、第 2 メニューは非表示になる時間がありません。次に、第 1 レベルのメニューを

またはに配置します。これにより、マウスが

または上にある限り、第 2 レベルのメニューレイヤーは非表示になりません。メニューと第 2 レベルのメニューレイヤーはかなり離れているように見えますが、実際には第 2 レベルのメニューレイヤーと第 1 レベルのメニューレイヤーは非常に似ており、重複している部分さえある可能性があります。 2層。

5 番目のステップは、第 1 レベルのメニューレイヤーと第 2 レベルのメニューレイヤーの onmouseover 属性と onmouseout 属性を設定することです。これらは、第 2 レベルのメニューレイヤーの表示と非表示を制御するために使用されます。主に、第 2 レベルのメニューレイヤの表示属性値を設定します。ここではあまり紹介しません。完全なソースコードは次のとおりです。

ユニバーサルセカンダリメニュー

メニュー 1

|
メニュー 2
|
メニュー 3<title>
|
</title>メニュー 4<style type="text/css"> 
    #menu 
    { 
        width:300px; 
        margin:auto; 
    } 
#div1 
{ 
display:none; 
font-size:12px; 
position:relative; 
left:0px; 
top:0px; 
background-color:White; 
padding:5px 10px 0px 10px; 
width:320px; 
} 
#div2 
{ 
display:none; 
font-size:12px; 
position:relative; 
left:50px; 
top:0px; 
background-color:White; 
padding:5px 10px 0px 10px; 
width:320px; 
} 
#div3 
{ 
display:none; 
font-size:12px; 
position:relative; 
left:120px; 
top:0px; 
background-color:White; 
padding:5px 10px 0px 10px; 
width:320px; 
} 
#div4 
{ 
display:none; 
font-size:12px; 
position:relative; 
left:200px; 
top:0px; 
background-color:White; 
padding:5px 10px 0px 10px; 
width:320px; 
} 
    </style>

サブメニュー 1<div id="menu">
<a href="#" onmouseover="showDiv('div1')" onmouseout="hiddenDiv('div1')">
</a>
<a href="#" onmouseover="showDiv('div2')" onmouseout="hiddenDiv('div2')">サブメニュー 1</a>
<a href="#" onmouseover="showDiv('div3')" onmouseout="hiddenDiv('div3')">サブメニュー 2</a>
<a href="#" onmouseover="showDiv('div4')" onmouseout="hiddenDiv('div4')">
</a>
<div id="div1" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">サブメニュー 1<a href="#">
</a>サブメニュー 2</div>
<div id="div2" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">サブメニュー 3<a href="#">
</a>
<a href="#">
</a>サブメニュー 1</div>
<div id="div3" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">サブメニュー 2<a href="#">
</a>サブメニュー 3<a href="#">
</a>サブメニュー 4<a href="#">
</a>
</div>
<div id="div4" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">
<a href="#">
</a><a href="#"></a> <a href="#"> </a>[Ctrl A すべて選択 注: <a href="#">外部 Js を導入する必要がある場合は、</a> を実行するために更新する必要があります]</div>
<br>上記のコードは、IE 7、Opera 9.6、Firefox 3、および Flock 2 で正常に実行されます。 ソース コードのダウンロード<br><a href="http://xiazai.jb51.net/200906/yuanma/js_erjicaidan.rar">http://xiazai.jb51.net/200906/yuanma/js_erjicaidan.rar</a>
</div>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript DOM オブジェクトのサンプルコードの学習_JavaScript スキル次の記事：JavaScript DOM オブジェクトのサンプルコードの学習_JavaScript スキル

続きを見る

ユニバーサル セカンダリ メニュー コード (CSS JavaScript)_ナビゲーション メニュー

関連記事

ユニバーサルセカンダリメニューコード (CSS JavaScript)_ナビゲーションメニュー