Opening "menu" at the point that was clicked

Question

Well, let’s say I have a link, that link is 150px by 150px. I would like you to click on any part of this link, open a menu, exactly in the part that was clicked, and when you take the mouse over this menu it "disappear" again!

Answer 1

The position where the click occurred (relative to the document) is passed in event.pageX and event.pageY.

An example of what it could look like:

_{Comments on the code}

$('a.abre-menu').click(function(evt){
// evt aqui é o event que é passado pelo jQuery

$('.menu').hide(); // esconde todos os menus

$('.menu[data-menu-id="'+ $(this).data('menu-id') + '"]')
    .hide()
    .css({ 
     // o 1 extra é para evitar que o "mouseleave" seja executado imediatamente caso o usuário mova o mouse para fora do menu na outra direção.
        left: evt.pageX + 1, 
        top: evt.pageY + 1
    })
    .fadeIn(); // fadeIn() para mostrar o "menu". Pode ser substituído somente por show() ou qualquer outro efeito como "slideDown()", por exemplo.

return false;
});

$('.menu').mouseleave(function(){
  // o "menu" sempre será fechado no evento "mouseleave"
  $(this).fadeOut();
});

a { 
    width: 150px; 
    height: 150px;
    background-color: #DDD;
    display: block;
    line-height: 150px;
    text-align: center;
    text-decoration: none;
}

#menu {
    display: none; 
    position: absolute; 
    width: 200px;
    height: 150px;
    color: #FFF; 
    background-color: rgb(144,144,144);
}

#menu h1 {
    margin: 0px;
    padding: 5px;
    background-color: rgb(88, 88, 88); 
    font-size: 18px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="abre-menu">Algum link de teste</a>
<div id="menu">
    <h1>Menu</h1>
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

In the style that I did in this example, the only really important part is that #menu must had position: absolute;, otherwise the positioning will not work.

Updating:

Your question about how to create multiple links with a menu for each is interesting and requires only a few minor changes to the original code.

To associate the menu to the link just use the same value in the attribute data-menu-id.

Example:

$('a.abre-menu').click(function(evt){
    // evt aqui é o event que é passado pelo jQuery

    $('.menu').hide(); // esconde todos os menus
    
    $('.menu[data-menu-id="'+ $(this).data('menu-id') + '"]') // este selector pega todos os itens com atributo "data-menu-id" = ao data-menu-id do link clicado
        .hide()
        .css({ 
         // o 1 extra é para evitar que o "mouseleave" seja executado imediatamente caso o usuário mova o mouse para fora do menu na outra direção.
            left: evt.pageX + 1, 
            top: evt.pageY + 1
        })
        .fadeIn(); // fadeIn() para mostrar o "menu". Pode ser substituído somente por show() ou qualquer outro efeito como "slideDown()", por exemplo.
    
    return false;
});

$('.menu').mouseleave(function(){
  // o "menu" sempre será fechado no evento "mouseleave"
  $(this).fadeOut();
});

a { 
    width: 150px; 
    height: 150px;
    background-color: #DDD;
    display: inline-block;
    line-height: 150px;
    text-align: center;
    text-decoration: none;
}

.menu {
    display: none; 
    position: absolute; 
    width: 200px;
    height: 150px;
    color: #FFF; 
    background-color: rgb(144,144,144);
}

.menu h1 {
    margin: 0px;
    padding: 5px;
    background-color: rgb(88, 88, 88); 
    font-size: 18px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="abre-menu" data-menu-id="menu1">Algum link de teste</a>
<div class="menu" data-menu-id="menu1">
    <h1>Menu</h1>
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

<a href="#" class="abre-menu" data-menu-id="menu2">Outro link de teste</a>
<div class="menu" data-menu-id="menu2">
    <h1>Menu 2</h1>
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>