Opening "menu" at the point that was clicked

Question

Opening "menu" at the point that was clicked

Navigation

#1 by (3 votes)

1

Well,let'ssayIhavealink,thislinkis150pxby150px.Iwouldlikethatwhenclickingonanypartofthislink,openamenu,exactlyinthepartthatwasclicked,andthatwhenyoumouseoverthismenuit"disappears" again!

jquery

asked by anonymous 20.02.2015 / 03:09

1 answer

Is it possible to apply external and internal shadow effect to a box in css3? Difficulty in popularizing GridView

score 3 · Accepted Answer

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

An example of how it might look:

Comments in 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><ahref="#" 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 I've made in this example, the only really important part is that% w / w should have w / o%, otherwise positioning will not work.

Update:

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

To associate the menu with the link just use the same value in the #menu attribute.

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><ahref="#" 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>