jQuery Hover Menu

When you are scrolling a Google result search, 开发者_JAVA技巧if you hover over a result, a popup right menu shows (showing a snapshot of the website result).

I have a feature as follows:

• User is browsing a restaurant menu
• He/she selects an item to add to the cart
• I wold like to show a right-side menu upon hover over an item, such that when he/she selects an item, the user could see the cart details in that side-menu (user can remove even items from that cart showing in the right-side menu).

Can I do this with jQuery? Is there an available plug-in? It's more like a "Hover Menu".

Thanks!

$('#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
});

While there are most likely plugins that do similiar things, this should not be so hard to implement.

Assuming a structure like this:

<ul class="restaurant-menu">
    <li>
        <a href="tastymenu.html"><img src="yummy.jpg" alt="" /></a>
        <div class="info" style="display:none;">
        <!-- you could put all kinds of info here -->
        </div>
    </li>
</ul>

... You could do something like this:

$(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
    });
});

Create a div that is hidden. and after use:

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

Hope it helps

You can have some insperation from:

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

I believe you are looking for something like:

<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>

Adding the hover menu to the thing you are hovering allows you to roll into the hover menu without it dropping (since you won't be rolling off of the item you are hovering).

• Using the "Append" method allows for use of only one instance of the "Hover Menu" since append will just move the item if it is on the page already.

Demo - http://jsfiddle.net/joalbright/4mAYE/