Início
e ae galera hoje vamos aprender a criar um menu de contexto personalizado via javascript no caso os menus de contextos são esses que a gente aperta o botao direito do mouse. para a gente começar criamos um codigo basico em html
com o html pronto criamos a tag javascript
criamos a tag style para o css
agora criamos uma tag div dentro do body ja que ela que vai ser o menu de contexto, colocamos um id nela tambem (nao vou motrar o codigo html toda apenas a parte referente que estamos trabalhando
dentro do div criamos outros divs que sera a opção quando a pessoa clicar, no meu caso vai ter duas opçoes sendo ela alerta e a outra google
agora vamos mexer um pouco na estetica, meu menu de contexto vai ser 200x150, vai ter uma borda vermelha, vai ter uma imagem de fundo da yami, o texto centralizado e ja vou colocar ele em uma posição absoluta para nao interferir com o codigo entao o css ficaria assim
![[tutorial] menu de contexto personalizado 2ev4wnb](https://2img.net/h/oi66.tinypic.com/2ev4wnb.jpg)
agora vamos ocultar o menu ali usando o css com display none
vamos colocar o evento oncontextmenu no javascript e atribuir uma uma função para ele
essa função é importante no final retornar false par desativar o menu de contexto
usamos o document.getElementById para acessar pelo id o nosso menu tambem atribuimos a uma variavel
agora pela variavel a gente muda o css display para block usando o javascript com isso quando apertar o botao direito BUUUM vai aparecer o nosso menu
agora criamos uma segunda função que vou chamar de kodosumiu
nessa nova função usamos o document.getElementById tambem (eu sei que dava para deixar a variavel global mais to com preguiça de alterar o tutorial), porem dessa vez a gente coloca o display como none
e chamamos essa função no evento onclick do body, entao quando a gente clicar com o botao direito vai aparecer o menu quando a gente clicar com o esquerdo vai sumir (daria para fazer algo mais complexo como verificar se esta clicando dentro do menu ou fora dele porem isso é so um exemplo basico)
os menus de contexto aparece perto da onde a gente clica e o nosso nao entao vamos codar isso, primeiro criamos duas variveis globais no js ou seja fora das funçoes que vou chamar de kodoX e kodoY
agora usamos outro evento que é o onmousemove para a gente pegar a posição do mouse, tambem colocamos uma variavel nessa função para a gente pegar a posição
agora atribuimos os atributos x e y daquela variavel para aquela variavel global
dentro da função que aparece o menu de contexto no caso o evento oncontextmenu a gente atribui as variaveis globais para o css sendo ele o left e o top
![[tutorial] menu de contexto personalizado 143er2c](https://2img.net/h/oi65.tinypic.com/143er2c.jpg)
agora criamos uma função para cada botao no meu caso duas e adicionamos as funcionalidade que desejamos nelas
depois adicionamos as funçoes nos eventos onclick nas tags
![[tutorial] menu de contexto personalizado 11aig3o](https://2img.net/h/oi63.tinypic.com/11aig3o.jpg)
entao galera esta pronto o nosso menu de contexto personalizado ^^
by kodo no kami
- Código:
<html>
<head>
</head>
<body>
</body>
</html>
com o html pronto criamos a tag javascript
- Código:
<html>
<head>
<script>
</script>
</head>
<body>
</body>
</html>
criamos a tag style para o css
- Código:
<html>
<head>
<style>
</style
<script>
</script>
</head>
<body>
</body>
</html>
agora criamos uma tag div dentro do body ja que ela que vai ser o menu de contexto, colocamos um id nela tambem (nao vou motrar o codigo html toda apenas a parte referente que estamos trabalhando
- Código:
<body>
<div id="kodocontexto">
</div>
</body>
dentro do div criamos outros divs que sera a opção quando a pessoa clicar, no meu caso vai ter duas opçoes sendo ela alerta e a outra google
- Código:
<body>
<div id="kodocontexto">
<div id="kodoalerta">alerta</div>
<div id="kodogoogle">google</div>
</div>
</body>
agora vamos mexer um pouco na estetica, meu menu de contexto vai ser 200x150, vai ter uma borda vermelha, vai ter uma imagem de fundo da yami, o texto centralizado e ja vou colocar ele em uma posição absoluta para nao interferir com o codigo entao o css ficaria assim
- Código:
<style>
#kodocontexto{
width: 200px;
height: 150px;
text-align: center;
border: solid red;
background-image: url("yami.png");
background-repeat: round;
position: absolute;
}
</style>
agora vamos ocultar o menu ali usando o css com display none
- Código:
<style>
#kodocontexto{
width: 200px;
height: 150px;
text-align: center;
border: solid red;
background-image: url("yami.png");
background-repeat: round;
position: absolute;
display: none;
}
</style>
vamos colocar o evento oncontextmenu no javascript e atribuir uma uma função para ele
- Código:
<script>
oncontextmenu = function(){
}
</script>
essa função é importante no final retornar false par desativar o menu de contexto
- Código:
<script>
oncontextmenu = function(){
return false;
}
</script>
usamos o document.getElementById para acessar pelo id o nosso menu tambem atribuimos a uma variavel
- Código:
<script>
oncontextmenu = function(){
kodomenu = document.getElementById("kodocontexto");
return false;
}
</script>
agora pela variavel a gente muda o css display para block usando o javascript com isso quando apertar o botao direito BUUUM vai aparecer o nosso menu
- Código:
<script>
oncontextmenu = function(){
kodomenu = document.getElementById("kodocontexto");
kodomenu.style.display = "block";
return false;
}
</script>
agora criamos uma segunda função que vou chamar de kodosumiu
- Código:
<script>
oncontextmenu = function(){
kodomenu = document.getElementById("kodocontexto");
kodomenu.style.display = "block";
return false;
}
function kodosumiu(){
}
</script>
nessa nova função usamos o document.getElementById tambem (eu sei que dava para deixar a variavel global mais to com preguiça de alterar o tutorial), porem dessa vez a gente coloca o display como none
- Código:
<script>
oncontextmenu = function(){
kodomenu = document.getElementById("kodocontexto");
kodomenu.style.display = "block";
return false;
}
function kodosumiu(){
kodomenu = document.getElementById("kodocontexto");
kodomenu.style.display = "none";
}
</script>
e chamamos essa função no evento onclick do body, entao quando a gente clicar com o botao direito vai aparecer o menu quando a gente clicar com o esquerdo vai sumir (daria para fazer algo mais complexo como verificar se esta clicando dentro do menu ou fora dele porem isso é so um exemplo basico)
- Código:
</head>
<body onclick="kodosumiu()">
<div id="kodocontexto">
os menus de contexto aparece perto da onde a gente clica e o nosso nao entao vamos codar isso, primeiro criamos duas variveis globais no js ou seja fora das funçoes que vou chamar de kodoX e kodoY
- Código:
<script>
kodoX = 0;
kodoY = 0;
oncontextmenu = function(){
kodomenu = document.getElementById("kodocontexto");
kodomenu.style.display = "block";
return false;
}
function kodosumiu(){
kodomenu = document.getElementById("kodocontexto");
kodomenu.style.display = "none";
}
</script>
agora usamos outro evento que é o onmousemove para a gente pegar a posição do mouse, tambem colocamos uma variavel nessa função para a gente pegar a posição
- Código:
<script>
kodoX = 0;
kodoY = 0;
oncontextmenu = function(){
kodomenu = document.getElementById("kodocontexto");
kodomenu.style.display = "block";
return false;
}
function kodosumiu(){
kodomenu = document.getElementById("kodocontexto");
kodomenu.style.display = "none";
}
onmousemove = function(e){
}
</script>
agora atribuimos os atributos x e y daquela variavel para aquela variavel global
- Código:
<script>
kodoX = 0;
kodoY = 0;
oncontextmenu = function(){
kodomenu = document.getElementById("kodocontexto");
kodomenu.style.display = "block";
return false;
}
function kodosumiu(){
kodomenu = document.getElementById("kodocontexto");
kodomenu.style.display = "none";
}
onmousemove = function(e){
kodoX = e.x;
kodoY = e.y;
}
</script>
dentro da função que aparece o menu de contexto no caso o evento oncontextmenu a gente atribui as variaveis globais para o css sendo ele o left e o top
- Código:
<script>
kodoX = 0;
kodoY = 0;
oncontextmenu = function(){
kodomenu = document.getElementById("kodocontexto");
kodomenu.style.display = "block";
kodomenu.style.left = kodoX + "px";
kodomenu.style.top = kodoY + "px";
return false;
}
function kodosumiu(){
kodomenu = document.getElementById("kodocontexto");
kodomenu.style.display = "none";
}
onmousemove = function(e){
kodoX = e.x;
kodoY = e.y;
}
</script>
agora criamos uma função para cada botao no meu caso duas e adicionamos as funcionalidade que desejamos nelas
- Código:
<script>
kodoX = 0;
kodoY = 0;
oncontextmenu = function(){
kodomenu = document.getElementById("kodocontexto");
kodomenu.style.display = "block";
kodomenu.style.left = kodoX + "px";
kodomenu.style.top = kodoY + "px";
return false;
}
function kodosumiu(){
kodomenu = document.getElementById("kodocontexto");
kodomenu.style.display = "none";
}
onmousemove = function(e){
kodoX = e.x;
kodoY = e.y;
}
function kodoAlerta(){
alert("tutorial by kodo no kami")
}
function kodoGoogle(){
document.location = "https://www.google.com.br";
}
</script>
depois adicionamos as funçoes nos eventos onclick nas tags
- Código:
<body onclick="kodosumiu()">
<div id="kodocontexto">
<div id="kodoalerta" onclick="kodoAlerta()">alerta</div>
<div id="kodogoogle" onclick="kodoGoogle()">google</div>
</div>
</body>
entao galera esta pronto o nosso menu de contexto personalizado ^^
by kodo no kami
