jQuery Hover Menu

Question

Когда вы прокручиваете поиск результатов Google, если вы наведите указатель мыши на результат, появится всплывающее меню справа (показывается моментальный снимок результата веб-сайта).

У меня есть функция следующим образом:

• Пользователь просматривает меню ресторана
• Он/она выбирает элемент для добавления в корзину
• Я пустошь хотел показать меню правой стороны при наведении курсора на предмет, так что, когда он выбирает элемент, пользователь может видеть детали корзины в этом боковом меню (пользователь может удалить даже предметы из этой корзины, отображаемые в правом меню).

Могу ли я сделать это с помощью jQuery? Есть ли доступный плагин? Это больше похоже на «Hover Menu».

Спасибо!

Answer 1

Создайте div, который скрыт. и после использования:

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

Надеется, что это помогает

Вы можете иметь некоторые insperation от:

• 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

I Бели Накануне вы ищете что-то вроде:

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

Добавление меню при наведении на вещь вы зависания позволяет свернуть в меню парения без него снижается (так как вы не будете скатывания пункта вы зависания).

• Использование метода «Добавить» позволяет использовать только один экземпляр «Hover Menu», поскольку append просто перемещает элемент, если он уже находится на странице.

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

Answer 4

Хотя есть, скорее всего, плагины, которые делают вещи похожи, это не должно быть так сложно реализовать.

Предполагая, структура, как это:

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

... Вы могли бы сделать что-то вроде этого:

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