Jqueryを使用して実装された非常に美しいメニューは、フラッシュに実装されたメニューのみに匹敵します。
このメニューは、互いに重ね合わされた画像のレイヤーの背景の位置を変更することで機能します。
それでは、始めましょう。
開始するには、背景（最下層）が必要です。
同じ「ガレージドア」の画像（中間層）：
そして、「出入り口（最上層）の画像：
htmlメニューフレーム自体を作成します。
< ul id = "menuback" >
< li class = "shutter" id = "shutter1" > <a class = "link" href = "# 1">リンク1 </ a > </ li >
< li class = "shutter" id = "shutter2" > <a class = "link" href = "# 2">リンク2 </ a > </ li >
< li class = "shutter" id = "shutter3" > <a class = "link" href = "# 3">リンク3 </ a > </ li >
< li class = "shutter" id = "shutter4" > <a class = "link" href = "# 4">リンク4 </ a > </ li >
</ ul >
cssまたはjavascriptが無効になっている場合、メニューは通常のリンクのリストのように見えます。つまり、メイン機能は引き続き実行されます。
cssを使用してメニューを飾ります：
* {margin：0px; パディング：0px; }そして最後に、jQueryで彼に命を吹き込んでください。
body {背景：＃c1c1c1; }
{輪郭スタイル：なし; }
ul＃menuback {
マージン：50ピクセル自動;
リストスタイル：なし;
背景：url（../ images / menu-bg.jpg）;
幅：800px;
オーバーフロー：自動;
}
ul＃menuback li.shutter {
幅：200px;
高さ：100px;
ディスプレイ：ブロック;
float：左;
}
ul＃menuback li＃shutter1 {
背景：url（../ images / shutter-africanplains.jpg）no-repeat;
}
ul＃menuback li＃shutter2 {
背景：url（../ images / shutter-reptiles.jpg）no-repeat;
}
ul＃menuback li＃shutter3 {
背景：url（../ images / shutter-aviary.jpg）繰り返しなし;
}
ul＃menuback li＃shutter4 {
背景：url（../ images / shutter-arcticzone.jpg）no-repeat;
}
a.link {
幅：200px;
高さ：100px;
ディスプレイ：ブロック;
背景：url（../ images / window.png）繰り返しなしの下部中央。
テキストインデント：-9999px;
}
JQuery自体はcssのバックグラウンド位置で完全に機能することはできないため、1キロバイトの小さなプラグインを使用します。
< script type = "text / javascript" src = "js / jquery-1.2.6.min.js" > </ script >
<script type = "text / javascript" src = "js / jquery.backgroundPosition.js" > </ script>
<script type = "text / javascript" >
$（ document ）.ready（ function （）{
// Firefoxでcssを設定します（backgroundPosition jsを使用するために必要です）
$（ '＃shutter1' ）. css （{backgroundPosition： '0px 0px' }）;
//シャッターをアニメーション化します
$（ ".link" ）.hover（ function （）{
$（ this ）.parent（）。animate（{backgroundPosition： '（0px -100px）' }、500）;
}、 関数 （）{
$（ this ）.parent（）。animate（{backgroundPosition： '（0px 0px）' }、500）;
}）;
}）;
</ スクリプト >
更新： IE6では、PNG画像の透明度の処理が正しくないため、メニューは正しく機能しません。
この不具合を修正するために、次のcssコードを使用します（このハックを誤って使用した場合は謝罪します）。
<！-[IE 7の場合]>
<style type = "text / css">
a.link {
フィルター：progid：DXImageTransform.Microsoft.AlphaImageLoader（src = 'images / window.png'、sizingMethod = 'scale'）;
背景：url（images / blank.gif）繰り返しなしの下部中央。
}
</ style>
<！[endif]->
作業の結果を（画像ソースとともに）以下で確認またはダウンロードできます。
ご清聴ありがとうございました！
私のブログ-Chernev.ru
結果を見る（デモ）
ソースをダウンロード
ソース（英語）