Как добавить всплывающее меню рядом со ссылкой на hover?

Question

Я пишу расширение, которое добавляет к существующему сайту, поэтому я не могу напрямую изменять HTML. В основном существует серия ссылок, содержащихся в одном div, разделенных только пробелами. Я пытаюсь использовать jquery, чтобы добавить ссылку моего собственного в произвольное место в этой серии и открыть небольшое меню сразу рядом со ссылкой, например контекстное меню правой кнопки мыши. Когда фокус укладки ссылки/меню исчез, он должен исчезнуть.

Я могу обработать jquery для фактического поведения, но я немного обеспокоен тем, где в документе я должен размещать html для этого меню. Должно ли это быть в конце тела? Прямо перед/после ссылки? И затем, когда я наводил ссылку на ссылку, как мне получить правильное позиционирование для этого элемента? Я нашел примеры, но все они используют списки. Мне просто нужно меню для наведения ссылки, которое появляется рядом со ссылкой.

Вкратце, моя главная забота о том, как правильно расположить всплывающее окно рядом со ссылкой. Вторичным является то, как сохранить меню открытым, когда я пытаюсь навести на него, а не ссылку.

Это, как далеко я могу получить, прежде чем я не знаю, что делать: http://jsfiddle.net/jRpyp/

$(".menu a").filter(function(index) { return $(this).text() === "Link 3"; }).after(" | <a href=\"#\" id=\"popup-link\">My text</a> | "); 
$("#popup").toggle(); 
$("#popup-link").hover(
    function(e) 
    { 
     $("#popup").show(); 
    }, 
    function(e) 
    { 
     $("#popup").fadeOut("slow"); 
    }); 

И в HTML:

<div class="menu"> 
    <a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a> <br /> 
    <a href="#">More links</a> | <a href="#">More links</a> | <a href="#">More links</a> | <a href="#">More links</a> 
</div> 
<div id="popup"> 
    <ul> 
     <li>Link 1</li> 
     <li>Link 2</li> 
    </ul> 
</div> 

Answer 1

ОК, я нашел ответ, который работает. Я не уверен, что это лучший способ сделать это, поэтому я продолжу и оставлю его открытым, если кто-то может найти что-то лучшее.

Сначала я сделал еще несколько исследований и нашел функцию jQuery offset(), которая позволяет мне получить позицию ссылки. Оттуда я установил позицию div в ссылку. У меня были некоторые проблемы с зависанием, слишком разборчивым в том, где мышь, поэтому я создал большой div, который перемещается по ссылке с левым дополнением, чтобы сама ссылка не была скрыта, пока было показано меню, и чтобы я мог у вас есть небольшое пространство для маневра вне меню, чтобы оно не исчезло. Изменение позиционирования и заполнения div приведет к большей гибкости в том, как далеко мышь может двигаться до того, как меню исчезнет.

Вот fiddle.

А вот код минус HTML/CSS:

$(".menu a").filter(function(index) { return $(this).text() === "Link 3"; }).after(" | <a href=\"#\" id=\"popup-link\">My text</a> | "); 

var popupPosition = $("#popup-link").offset(); 
// Edit positioning as needed 
//popupPosition.left += $("#popup-link").width(); 

$("#popup").offset(popupPosition); 
$("#popup").css("padding-left", $("#popup-link").width()); 
$("#popup").toggle(); 

$("#popup-link").hover(
    function(e) 
    { 
     $("#popup").show(); 
    }, 
    function(e) 
    { 
     //$("#popup").fadeOut("slow"); 
    }); 

$("#popup").hover(
    function(e) 
    { 
     popupHovering = true; 
     $("#popup").show(); 
    }, 
    function(e) 
    { 
     $("#popup").fadeOut("slow"); 
}); 

Answer 2

Прежде всего, #popup должен быть установлен позиционирование как absolute. Это позволит вам размещать его в любом месте на странице, независимо от того, где он отображается в HTML.

Это основной Jquery вы должны использовать

function (e) { 
    var pos = $(this).position(); // Gets the position of the link 
    var width = $(this).outerWidth(); // Gets the width of the link 
    $("#popup").css({ 
     top: pos.top + "px", // Uses the top positioning of the link to put it in the same area 
     left: (pos.left + width) + "px" // First puts the menu in the same leftward position of the link, then adds the width to prevent overlap 
    }).show(); 
} 

Это гарантирует, что независимо от того, где связь, он появится ближе к ссылке

Если вы хотите добавить некоторые больше пространства между ссылкой и меню, просто оными + и рядом

Например

left: (pos.left + width + 10) + "px" // Would add 10 extra pixels, so it doesn't look like they are right next to each other 
top: (pos.top + 20) + "px" // Adds 20 extra pixels 

Fiddle

---

_{1: Предоставлено https://stackoverflow.com/a/158176/1470950}

Answer 3

Вы хотите что-то похоже на эту http://jsfiddle.net/jRpyp/4/ обновленной версии сценария?

$("#popup").toggle(); 
$(".menu a").hover(function (e) { 

// change selected a-tags css to get a margin 

$("#popup").css({ 
    position: "absolute", 
    top: 50 + "px", // based on the position of the selected a-tag 
    left: 100 + "px" // based on the position of the selected a-tag 
}).show(); 
}, 

function (e) { 
    $("#popup").fadeOut("slow"); 
}); 

Что касается одному из ваших вопросов:

Я могу справиться с JQuery для фактического поведения, но я немного обеспокоен , где в документе я должен поместить HTML для это меню. Должно ли это быть в конце тела? Прямо перед/после ссылки ?

Не имеет значения, где разместить html, поскольку его единственное использование должно отображаться (в определенном положении) внутри стороны. Я думаю, что люди часто вставляют такой html в конце документа, в div с шаблоном типа id (для облегчения доступа к нему с помощью jQuery).

(я надеюсь, что я получил вопрос правильно.)