Make div appear when right-clicking mouse

Asked

Viewed 2,097 times

4

Guys I use the function (Hover) to make a DIV appear, I wonder if there is a way to make it appear when right-clicking. That is, a child DIV appears when I click on a parent DIV right-click.

Follow an example I’m trying here.

.pagina {
    width: 200px;
   margin-left: 119px;
}

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    text-decoration: none;
}

#cssmenu a {
    line-height: 40px;
}

#cssmenu > ul > li:hover:after {
    content: '';
    position: absolute;
    top: 30px;
    left: 0;
    display: block;
    width: 0;
    height: 0;
    bottom: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #484848;
    margin-left: 6px;
}

#cssmenu .has-sub:hover > ul {
    display: block;
}

#cssmenu .has-sub ul {
    display: none;
    width: 150px;
    margin-left: -119px;
    position: absolute;
    z-index: 3;
}

#cssmenu .has-sub ul li a {
    background: #000;
    border-bottom: 1px solid #d7d7d7;
    display: block;
    line-height: 120%;
    padding: 10px;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    overflow: hidden;
}

#cssmenu .has-sub ul li:hover a {
    background: #1E90FF;
}
<div class='pagina'>

<div id='cssmenu'>
    <ul>
        <li class='has-sub'><a href='#'>x</a>
            <ul>
                <li><a class='onclick' onclick='document.location="google.com";}'><b>link1</b></a></li>
                <li><a class='onclick' onclick='document.location="google.com";}'><b>link1</b></a></li>
            </ul>
        </li>
    </ul>
</div>

</div>

<div class='pagina'>

<div id='cssmenu'>
    <ul>
        <li class='has-sub'><a href='#'>x</a>
            <ul>
                <li><a class='onclick' onclick='document.location="google.com";}'><b>link1</b></a></li>
                <li><a class='onclick' onclick='document.location="google.com";}'><b>link1</b></a></li>
            </ul>
        </li>
    </ul>
</div>

</div>

jquery html css

  • http://javascript.info/tutorial/mouse-events - I recommend you have a look

  • Explain better which father will be and which son will be.

  • Good in the above example I wanted the menu to embrace by right-clicking. The question of parent DIV and child DIV would be like this. I have a DIV id=father, when right-clicking on it a DIV id=son appears. Got it?

  • @Hugoborges I posted an answer below, just adapt your need. Only by better understanding the question, your father are the li that has the a href?

  • yes that’s right.

2 answers

6


In that reply from SO-EN has what you want. Use the event mousedown and make sure it was the right button that was triggered by the code if(e.button == 2) Jsfiddle.

While I’m at it I’d change the display:none for Hidden, new attribute of HTML5.

Based on your comments I adapted your code to work as you need:

document.oncontextmenu = function() {return false;};

  $('li').mousedown(function(e){ 
    if(e.button == 2) { 
      $(this).find('ul').show();
    } 
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='cssmenu'>
   <ul>
      <li class='has-sub'>
         <a href='#'>x</a>
         <ul hidden>
            <li><a class='onclick' onclick='document.location="google.com";}'><b>link1</b></a></li>
            <li><a class='onclick' onclick='document.location="google.com";}'><b>link1</b></a></li>
         </ul>
      </li>
   </ul>
</div>
</div>
<div class='pagina'>
   <div id='cssmenu'>
      <ul>
         <li class='has-sub'>
            <a href='#'>x</a>
            <ul hidden>
               <li><a class='onclick' onclick='document.location="google.com";}'><b>link1</b></a></li>
               <li><a class='onclick' onclick='document.location="google.com";}'><b>link1</b></a></li>
            </ul>
         </li>
      </ul>
   </div>
</div>

  • ok very good, but instead of sending an Alert as I do to appear another div?

  • 2

    @Hugoborges Here is an example of Marconi’s answer to your query. https://jsfiddle.net/0d3ketxk/1/

  • very good, I just have one more question, is it possible to make the div daughter appear under the mouse cursor? I am capturing the position just mouse and put it?

  • good muto, I want to know if it is possible to make the menu close by clicking elsewhere?

  • did not work, please edit your reply.

0

Well I know that probably you have already solved the problem, but better answering the questions of colleagues there who should still have doubts, below is an explanation of how to make a custom alternative menu.

In html place the following data-toogle="menu" and data-menu="div.menu" attributes in tr, div, or ul elements where div.menu is the name of the element that will be shown by clicking with the mouse helper on tr, div, or ul.

<table><tr id="1" data-toggle="openmenu" data-menu="div.teste"><td>...</td></tr></table>

And the menu to be displayed do so our div.test:

<div class="teste" style="background: red; color:#FFF;">construa seu menu aqui</div>

In javascript using jquery:

//desabilita o botão secundário do mouse
$(document).bind("contextmenu",function(e){
    return false;
});

//ativa o menu alternativo para o aplicativo
$('[data-toggle="openmenu"]').mousedown(function(e){
    var el = $(this), menu = el.attr("data-menu"), H = el.height(), posX = e.pageX, posY = e.pageY;
    if( e.button == 2 ) {
        $(menu).css({"position":"absolute", "top":posY-(H+H/2),"left":posX,"display":'',"z-index":"9999"});
        //alert("X "+posX+" Y "+posY+" H "+H);
    }
    //menu é ocultado em segundos ou pode ser chamado quando selecionar uma das opções do menu.
    setTimeout(function(){
        menuhide(menu)
    },10000);
});
menuhide = function (menu) {
    $(menu).css("display","none");
};

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.