1

inserir a descrição da imagem aqui

Bom, digamos que eu tenha um link, esse link tem dimensao de 150px por 150px. Gostaria que ao clicar em qualquer parte desse link, abrisse um menu, exatamente na parte que foi clicado, e que ao tirar o mouse cima desse menu ele "sumisse" novamente!

3
  • 1
    Você pode usar o evento $.mousedown() e testar o se o usuário usou o botão direito.então utiliza as propriedades clientX e clientY do event. Por fim precisaria apenas adicionar uma div com position: fixed e top: clientY e left: clientX 20/02/2015 às 2:31
  • Falar isso ate ajudaria!! Mas ajudaria quem sabe mexer com jquery! Porque eu não sei nada disso! 20/02/2015 às 2:34
  • 1
    Infelizmente não estou podendo fazer um exemplo agora, apenas deixei uma sugestão para caso alguém posa desenvolvê-la. Caso ninguém apareça, amanhã monto uma resposta 20/02/2015 às 2:37

1 Resposta 1

3

A posição onde o click ocorreu (relativa ao documento) é passada em event.pageX e event.pageY.

Um exemplo de como poderia ficar:

Comentários no código

$('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>

No estilo que fiz neste exemplo, a única parte realmente importante é que #menu deve ter position: absolute;, caso contrário o posicionamento não irá funcionar.

Atualização:

Sua dúvida sobre como criar diversos links com um menu para cada é interessante e requer apenas algumas pequenas alterações no código original.

Para associar o menu ao link basta usar o mesmo valor no atributo data-menu-id.

Exemplo:

$('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>

2
  • só uma duvida! Digamos que eu queira ter vários links, e vários menus! Sendo que cada link terá um menu! Preciso criar adicionar um script pra cada? Porque pelo o que eu vi o ('a.abre-menu') chama o $('.menu') 20/02/2015 às 3:10
  • 1
    @ivanveloso Atualizei a pergunta. Dê uma olhada. 20/02/2015 às 3:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .