Make div appear when right-clicking

Question

Make div appear when right-clicking

Navigation

#1 by (5 votes)
#2 by (0 votes)

3

I use the (hover) function to make a DIV appear, I wanted to know if I can make it appear when I right click. That is, a child DIV appears when I click a parent DIV with the right button.

Here's 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.br";}'><b>link1</b></a></li>
                <li><a class='onclick' onclick='document.location="google.com.br";}'><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.br";}'><b>link1</b></a></li>
                <li><a class='onclick' onclick='document.location="google.com.br";}'><b>link1</b></a></li>
            </ul>
        </li>
    </ul>
</div>

</div>

html jquery css

asked by anonymous 12.04.2016 / 18:55

2 answers

0

Well, I know that you have probably been able to solve the problem, but rather answer the questions of colleagues there that still have doubts, here's an explanation of how to make a customized alternative menu.

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

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

And the menu to be displayed, make this 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");
};

02.07.2018 / 20:04

Decimal places c # How to fire functions outside the scope of the Plugin?

score 5 · Accepted Answer

In this response from the SO-EN have what you want. Use the mousedown event and verify that it was the right click that was triggered through the if(e.button == 2) JSFiddle code.

I'd like to change display:none to hidden , new attribute of HTML5 .

Based on your feedback I've adapted your code to work as you need it:

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><divid='cssmenu'><ul><liclass='has-sub'><ahref='#'>x</a><ulhidden><li><aclass='onclick'onclick='document.location="google.com.br";}'><b>link1</b></a></li>
            <li><a class='onclick' onclick='document.location="google.com.br";}'><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.br";}'><b>link1</b></a></li>
               <li><a class='onclick' onclick='document.location="google.com.br";}'><b>link1</b></a></li>
            </ul>
         </li>
      </ul>
   </div>
</div>