jQueryのホバーメニュー

Question

Googleの検索結果をスクロールすると、結果の上にマウスを置くと、ポップアップの右メニューが表示されます（ウェブサイトの結果のスナップショットが表示されます）。

次のように私は機能を持っている：

• ユーザーは、彼/彼女は私が右サイドメニューを表示したいウォールド
• カートに追加する項目を選択
• レストランのメニューを閲覧していますユーザーがアイテムを選択すると、そのサイドメニュー（カート内のアイテムを右側のメニューに表示されているアイテムからも削除することができます）でカートの詳細が表示されます。

jQueryでこれを行うことはできますか？利用可能なプラグインはありますか？それは「ホバーメニュー」のようなものです。

ありがとうございます！

Answer 1

非表示のdivを作成します。使用後：私はベリ

• http://home.comcast.net/~littlemoe85/thumbhover/index.html
• http://craigsworks.com/projects/simpletip/

Answer 2

$('#menu li.items').hover(function() { 
    // show right-side menu and populate it with info about item 
}, function() { 
    // hide right-side menu 
}).click(function() { 
    // show cart-details in right-side menu and lock it 
}); 

Answer 3

：

$("#id").show(); 
$("#id").hide(); 

はあなたからいくつかのinsperationを持つことができ、それは

お役に立てば幸いですあなたのような何かを探してい前夜：あなたがしているアイテムの転がり落ちることはありませんので、あなたがホバリングしている事にホバーメニューを追加

<ul id="storeItems"> 
    <li>Item1</li> 
    <li>Item2</li> 
    <li>Item3</li> 
    <li>Item4</li> 
</ul> 

<ul id="hoverMenu"> 
    <li>inCart1</li> 
    <li>inCart1</li> 
    <li>inCart1</li> 
</ul> 

<script> 
var hoverMenu = $('#hoverMenu'); 
$(hoverMenu).hide(); 

$('#storeItems li').hover(function() { 
    $(this).append(hoverMenu); 
    $(hoverMenu).show(); 
}, function() { 
    $(hoverMenu).hide(); 
}); 
</script> 

は（あなたがそれを落とさずにホバーメニューにロールバックすることができますホバリング）。

• 「追加」メソッドを使用すると、「ホバーメニュー」のインスタンスが1つだけ使用できるようになります。これは、追加されたアイテムが既にページ上にある場合に移動するためです。

デモ - http://jsfiddle.net/joalbright/4mAYE/

Answer 4

似物事を行う可能性が最も高いのプラグインがありますが、これは実装するのは難しいことではありません。あなたはあなたが今持っているもののいくつかの例のHTMLを投稿することができます

$(function() { 
    $('.restaurant-menu li a').hover(function() { 
     // add the contents of .info to the menu info div and show it 
     $('#menu-info').html($('.info', this).html()).show(); 
    }).mouseout(function() { 
     // hide the menu info div 
     $('#menu-info').hide(); 
    }).click(function() { 
     // do other stuff 
    }); 
});