「Excellent Amazon」のホームページのポップアップメニュー効果を模倣したjqueryプラグイン_jquery

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

/*ポップアップ メニュー*/
// 剣なし 2008-07-03
//http://regedit.cnblogs.com
/*パラメータの説明*/
//showobj: 表示するメニュー ID
/ /timeout: 遅延時間、マウスが留まる/離れてからメニューの表示/非表示を開始するまでの遅延時間
//speed: メニューの表示速度、数値が大きいほど表示が遅くなります、デフォルトは 100
//呼び出し例: $("# button").DMenu("#content");
jQuery.fn.DMenu=function(showobj,timeout,speed){
timeout=timeout?timeout:300 ;
speed=speed?speed: 100;
//ボタンオブジェクト
var button=$(this);
//遅延カウンター
var timer=null;非表示のフローティング レイヤー
var hideDiv =$("

");
//コンテナ オブジェクト
var Container=$("

");
Container.hide();
hideDiv.append(Container);
//メニューオブジェクト
var jqShowObj=$(showobj);
//メニューを非表示
jqShowObj.hide ();
//メニュー表示ステータス
var display=false;
//ボタンオフセット
var offset=button.offset(); /メニュー領域の高さ
var height=jqShowObj.height();
//メニュー領域の幅
var width=jqShowObj.width();
//ボタンの高さ
var btnHeight=button .height();
//ボタンの幅
var btnWidth=button.width();
//位置決めレイヤーを前面に配置します
$(document.body).prepend (hideDiv);
/ /コンテナに入れます
//Container.append(jqShowObj);

//****メニュー表示メソッドの開始****//
var showMenu=function( ){
//If メニュー 表示されている場合は操作を終了します
if (display)
{
return false;
}
// コンテナのプロパティを設定します
コンテナ。 css({
margin: "0 auto ",
width:btnWidth "px",
height:btnHeight "px"
}); HideDiv.css({
position:"absolute ",
top:offset.top "px",
left:offset.left (btnWidth/2)-(width/2) "px",
height:height "px",
width:width "px"
}).show();
//コンテナに黒い境界線を追加します
Container.css({
border:"1px Solid #666666"
} ; width 4,
opacity:'100'},speed,function(){
//アニメーション終了時に開始//
//表示menu
jqShowObj.show();
/ /コンテナにメニューを追加
Container.append(jqShowObj);
//ボーダーを削除
Container.css({
border:" 0px"
});
//ディスプレイ ステータスを true に設定します
display=true;
//マウスを移動します
jqShowObj.mouseover(function(){
clearTimeout( timer);
});
//マウス移動 Open
jqShowObj.mouseout(function(){
hideMenu();
}); end//
});
}
//****表示メニュー方法の終了****//

//****メニューメソッドの開始を非表示****//
var HideMenu=function (){
clearTimeout(timer);
//拡張子 when
timer=setTimeout(function(){
//ボーダーを表示
Container.css({
border :"1px ソリッド #666666"
});
/ /コンテナを空にする
Container.empty();
//コンテナを縮小する
Container.animate({
width :btnWidth,height:btnHeight,marginTop:'0', opacity: '0'
},speed,function(){
//アニメーションが終了したら開始//
//コンテナを非表示にする
Container.hide();
//位置決めレイヤーを非表示にします
hideDiv.hide()
//表示ステータスを false に設定します
display=false;アニメーションが終了します end//
});
} ;
//****メニュー非表示方法の終了****//

//バインド ボタン マウス パスevent
button.hover(function(e){
//遅延表示メニュー
clearTimeout(timer);
timer=setTimeout(function(){
showMenu();
}, timeout);
},function(){
clearTimeout(timer);
// マウスがボタンから離れると、メニューがまだ表示されている場合は非表示になります
if( display){
timer=setTimeout(function(){
hideMenu();
},timeout)
}
});


注: ポップアップ メニューをブロックする選択の問題はプラグインとは関係がないため、ここでは解決していません。これに注意してください。ポップアップ メニューを使用すると、特定の解決策が自動的に検索されたり、レイアウトが調整されたりすることができます。

ファイルパッケージのダウンロード