最初の宣言:
私は長年にわたってWebのフロントエンドの位置で働いてきましたが、その位置には高い技術的要件はありません。 HTMLとCSSはより頻繁に使用され、元のJavaScriptはほとんどなく、基本的にコピー修飾されています。だから私が本当に書いたとき、私は基礎が堅実ではなく、私は学び、練習し、多くを得ることがわかった。
複製画像:
これ以上のナンセンスはありません、郵便番号
1。CSSコード
コードコピーは次のとおりです。
A:link {color:white; Text-Decoration:none;}
A:訪問{color:white; Text-decorative:none;}
A:Hover {color:white; Text-decorative:none;}
A:Active {color:white; Text-decorative:none;}
li {float:left; display:inline; background-color:#003366; width:120px; text-align:center; margin:2px; padding:10px 0 5px 0; position:relative;}
.limouseover {background-color:#0033ff; color:red;}
.limouseout {background-color:#003366; color:black;}
li ul {display:none; width:120px; position:absolute; left:0; top:30px;}
li ul li {マージン:0px auto; border-top:1px solid#006699;}
2。JavaScriptコード
コードコピーは次のとおりです。
<スクリプト言語= javascript>
関数メニュー(menu1){
//マウスを移動し、クラス名を切り取り、トグルを非表示にしてトグルを表示します。
if(document.getElementById(menu1)){
var menu_ul = document.getElementById(menu1);
if(menu_ul.getelementsbytagname( "li")。長さ){
var menu_li = menu_ul.getelementsbytagname( "li");
for(i in menu_li){
menu_li [i] .onmouseover = function(){this.classname = "limouseover"; if(this.getelementsbytagname( "ul")。length){this.getelementsbytagname( "ul")[0] .style.display = "block";}}}
menu_li [i] .onmouseout = function(){this.classname = "limouseout"; if(this.getelementsbytagname( "ul")。length){this.getelementsbytagname( "ul")[0] .style.display = "none";}}}}
}
}
}
}
</script>
3。HTMLコード
コードコピーは次のとおりです。
<ul id = menu1>
<li> <a href = ""> home </a> </li>
<li> <a href = "">メニュー1メニュー1 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
<li> <a href = "">メニュー2 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
</ul>
<Script> var menu1 = new Menu( "menu1"); </script>
説明:
1. ULページとLIページがより頻繁に使用されることを考慮すると、メニュースタイルの範囲を制限するためにCSSの前に#menu1を追加できます。
2。JSは主にマウスの動きと除去イベントを聴き、リムハウスオーバーとリムアウトスタイルに切り替えます。同時に、submenuの表示属性を変更して、非表示の機能を実現します。
3.同じページは、競合することなく繰り返し呼ぶことができます。 HTMLコードのJavaScriptコードは、コールインスタンスです。前のメニュー1は任意の変数名で、ブラケットのMENK1はHTMLページのIDです。
この例の短所:
1.メニューLiのマウスオーバー、マウスアウト、およびサブメニューLiは同じです。つまり、同じ色とフォントであり、個別の設定はありません。
2。IE6およびIE7と互換性があるため、位置:絶対が使用され、左と上部の属性が追加されます。上部は、メニューLIの全体的な高さに応じて設定する必要があります。