JQuery はナビゲーション ドロップダウンを表示するためのマウス スクロールを実装します list_jquery

Web サイトのナビゲーション バーに多くの項目がある場合、最初に同じレベルのディレクトリ内の列を非表示にすることがよくあります。ユーザーがマウスをロールオーバーすると表示されます。これは、JavaScript で実装されたナビゲーション バーのドロップダウン リストです。編集者がステップごとに説明します。これを実装するために Javascript のフレームワークである Jquery を使用していることは注目に値します。したがって、Jqueryを使用する場合は、ダウンロードする必要があります。

最初に HTML コードを作成します

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

テスト Web ページ


ここでは、CSS ファイルと JS ファイルを別々に外部ファイルに置きます。 layout.css ファイルのコードは次のとおりです:

コードをコピーします

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

@ CHARSET "GBK"; body{ font:12px Arial,Verdana; ul{ margin:0px; >リストスタイル-タイプ:なし; #it{ 幅:80px;

色:白;テキスト整列:センター;

ライン高さ:25px;
背景:黒;
#ul li{ 🎜>幅:80px;
色:白;
行の高さ:25px;黒;
ボーダー: 1 ピクセル白;
.highLight{
高さ: 25 ピクセル;
ボーダー: 1 ピクセル青; ;
color :black;
}


ここで JS ファイルについて説明することが重要です。




コードをコピー


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


$(document).ready(function ( ){
$('#ul').hide(); //ドロップダウン リストを非表示にするページを開きます
$('#it').hover( //マウスを上にスライドすると、ナビゲーション列
function(){
$('#ul').show(); // ドロップダウン リストを表示
$(this).css({'color':'red', 'background-color':'orange'}); //目を引くナビゲーション列のスタイルを設定します
},
function(){
$('#ul').hide(); //マウスを離した後はドロップダウン リストを非表示にします
}
);
$('#ul').hover( //ドロップダウン リスト自体も、ドロップダウン リストをクリックできないようにマウスをスライドさせます。
function(){
$('#ul') .show();
},

function(){
$('#ul').hide();
$('#it').css({'color': 'white','background-color':'black'});マウスがドロップダウン リストから離れると、ナビゲーション バーのスタイルもクリアされます。

} ); $('li'); //マウスをドロップダウン リストの上に置きます。現在の列のスタイルを変更するには function(){ $(this).css({'color':'red','background-color':'orange'} ), function(){ $(this).css({'color':'white','background-color':'black'});

} );

Web サイトのエディターに現在問題があるため、写真をアップロードすることができません。写真がない場合は、まずローカルでテストして効果を確認してください。