CSSとJSを組み合わせたドロップダウンメニューが主流のブラウザ_JavaScriptスキルをサポート

最初のステートメント:

私は長年ウェブフロントエンドの職で働いてきましたが、その職の技術的要件はそれほど高くありません。 HTMLとCSSはほとんど使いますが、JavaScriptはオリジナルがほとんどなく、基本的にはコピーして改変するので、実際に書いてみると基礎がしっかりしていないことがわかり、勉強と実践が同時にできてとても勉強になります。 。

レンダリング:

これ以上ナンセンスはやめて、コードを投稿しましょう

1.CSSコード

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

a:link{color:white;text-decoration:none;}
a:visited{色:白;テキスト装飾:なし;}
a:hover{色:白;テキスト装飾:なし;}
a:active{色:白;テキスト装飾:なし;}
li{float:left;display:inline;background-color:#003366;width:120px;text-align:center;margin:2px;padding:10px 0 5px 0;position:relative;}
.limouseover{背景色:#0033ff;色:赤;}
.limouseout{背景色:#003366;色:黒;}
li ul{表示:なし;幅:120ピクセル;位置:絶対;左:0;上:30ピクセル;}
li ul li{margin: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").length){
var menu_li=menu_ul.getElementsByTagName("li"); for (i in menu_li){
menu_li[i].onmouseover=function(){this.className="リムマウスオーバー";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="ブロック";}}
menu_li[i].onmouseout=function(){this.className="リムマウスアウト";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="なし";}}
}
}
}
}





3. HTML コード

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

ホームページ

メニュー 1メニュー 1

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

サブメニュー 2

メニュー 2

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

サブメニュー 2

<script>var menu1=new menu("menu1");</script>

説明:

1. ul ページと li ページがよく使用されることを考慮して、css の前に #menu1 を追加して、メニュー スタイルの範囲を制限できます。

2. js は主にマウスの移動イベントと削除イベントをリッスンし、それに応じて limouseover スタイルと limouseout スタイルに切り替え、同時にサブメニューの表示属性を変更して表示と非表示の機能を実現します。

3. 同じページを競合せずに繰り返し呼び出すことができます。HTML コード内の JavaScript コードは呼び出し元のインスタンスであり、括弧内の menu1 は HTML ページ内の ID です。

この例の欠点:

1. メニュー li とサブメニュー li のマウスオーバーとマウスアウトのスタイルは同じです。つまり、同じ色とフォントであり、個別の設定は実装されていません。

2. Ie6 と Ie7 との互換性が必要なので、position:absolute を使用する際に、top 属性をメニュー li の全体の高さに合わせて設定する必要があります。