Este artigo descreve o método de implementação de um menu de clique com o botão direito do clique com o botão direito do clique com diretórios de vários níveis no JS. Compartilhe para sua referência. A análise específica é a seguinte:
Este é um recurso muito bom do mouse da web. Este código pode controlar o menu do clique com o botão direito do mouse no mouse na página da web e é criado completamente de acordo com seus desejos. Pode ser exibido em vários níveis de catálogos.
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JS Página da Web personalizada Menu de navegação multinível </ititure>
<style type = "text/css">
html, corpo {altura: 100%; transbordamento: oculto;}
corpo, div, ul, li {margem: 0; preenchimento: 0;}
corpo {font: 12px/1.5/5fae/8f6f/96c5/9ed1;}
Ul {tipo de lista de lista: nenhum;}
#rightMenu {Posição: Absolute; top: -9999px; esquerda: -9999px;}
#RightMenu ul {Float: Esquerda; borda: 1px Solid #979797; Antecedentes: #f1f1f1 URL (imagens/line.png) 24px 0 repete-y; preenchimento: 2px; caixa de caixa: 2px 2px 2px rgba (0,0,0, .6);}
#rightMenu ul li {float: esquerda; claro: ambos; altura: 24px; cursor: ponteiro; altura da linha: 24px; espaço em branco: Nowrap; preenchimento: 0 30px;}
#rightMenu ul li.sub {Repetição de fundo: sem repetição; posição de fundo: à direita 9px; Imagem de fundo: URL (Images/Arrow.png);}
#rightMenu ul li.Active {Background-Color: #f1f3f6; Radio de borda: 3px; borda: 1px sólido #aecff7; altura: 22px; altura de linha: 22px; posição de fundo: direita -8px; preenchimento: 0 29px;}
#rightMenu Ul ul {Display: Nenhum; Posição: Absoluto;}
</style>
<script type = "text/javascript">
var getOffset = {
TOP: function (obj) {
retornar obj.offsettop + (obj.offsetParent? Argumentos.callee (obj.offsetParent): 0)
},
Esquerda: function (obj) {
retornar obj.offsetleft + (obj.offsetParent? argumentos.callee (obj.offsetParent): 0)
}
};
window.onload = function ()
{
var omenu = document.getElementById ("Rightmenu");
var aul = omenu.getElementsByTagName ("ul");
var ali = omenu.getElementsByTagName ("li");
var showtimer = hidetimer = null;
var i = 0;
var maxWidth = maxHeight = 0;
var adoc = [document.documentElement.offsetWidth, document.documentElement.offsetheight];
omenu.style.display = "nenhum";
para (i = 0; i <ali.length; i ++)
{
// Adicione uma flecha ao Li contendo o submenu
ali [i] .getElementsByTagName ("ul") [0] && (ali [i] .className = "sub");
// mova -se
Ali [i] .onMouseOver = function ()
{
var othis = this;
var ol = othis.getElementsByTagName ("ul");
// mova o mouse para o estilo
othis.className += "ativo";
// Mostrar submenu
if (oul [0])
{
ClearTimeout (Hidetimer);
showtimer = setTimeout (function ()
{
for (i = 0; i <othis.parentnode.children.length; i ++)
{
othis.parentnode.children [i] .getElementsByTagName ("ul") [0] &&
(othis.parentnode.children [i] .getElementsByTagName ("ul") [0] .style.display = "nenhum");
}
OU [0] .style.display = "bloco";
OU [0] .style.top = Othis.OffSetTop + "px";
OU [0] .style.left = othis.offsetWidth + "px";
setWidth (OU [0]);
// Faixa máxima de exibição
maxwidth = adoc [0] - OU [0] .offsetWidth;
maxHeight = adoc [1] - OU [0] .offsetHeight;
// evita o transbordamento
maxWidth <getOffset.left (om [0]) && (ul [0] .style.left = -Oul [0] .clientWidth + "px");
maxHeight <getOffset.top (om [0]) && (ul [0] .style.top = -Oul [0] .clientHeight + othis.offsettop + othis.clientHeight + "px")
}, 300);
}
};
// mouse fora
Ali [i] .onMouseOut = function ()
{
var othis = this;
var ol = othis.getElementsByTagName ("ul");
// Mouse Out Style
othis.className = othis.className.replace (// s? Active/, "");
ClearTimeout (Showtimer);
hidetimer = setTimeout (function ()
{
for (i = 0; i <othis.parentnode.children.length; i ++)
{
othis.parentnode.children [i] .getElementsByTagName ("ul") [0] &&
(othis.parentnode.children [i] .getElementsByTagName ("ul") [0] .style.display = "nenhum");
}
}, 300);
};
}
// Personalize o menu do clique com o botão direito
document.onContextMenu = function (evento)
{
Var Evento = Evento || Window.Event;
omenu.style.display = "bloco";
omenu.style.top = event.clienty + "px";
omenu.style.left = event.clientx + "px";
setWidth (AUL [0]);
// Faixa máxima de exibição
maxwidth = adoc [0] - omenu.offsetWidth;
maxHeight = adoc [1] - omenu.offSethEight;
// impedir o transbordamento do menu
omenu.offsettop> maxHeight && (omenu.style.top = maxHeight + "px");
omenu.offsetleft> maxwidth && (omenu.style.left = maxwidth + "px");
retornar falso;
};
// Clique para ocultar o menu
Document.OnClick = function ()
{
omenu.style.display = "Nenhum"
};
// por favor a maior largura em Li e atribua -a a todos os LIS no mesmo nível
função setWidth (OBJ)
{
maxwidth = 0;
for (i = 0; i <obj.children.length; i ++)
{
var oli = obj.children [i];
var iwidth = oli.clientwidth - parseint (oli.currentstyle? oli.currentstyle ["Paddingleft"]: getcomputedstyle (oli, nulo) ["Paddingleft"]) * 2
if (iwidth> maxwidth) maxwidth = iwidth;
}
for (i = 0; i <obj.children.length; i ++) obj.children [i] .style.width = maxwidth+"px";
}
};
</script>
</head>
<Body>
<Center> Clique com o botão direito do mouse de botão com o botão direito do mouse, clique com o botão direito do mouse na página para visualizar o efeito. </central>
<div id = "Rightmenu">
<ul>
<li> <strong> Javascript Learning </strong> </li>
<li>
Wulin.com
<ul>
<li> Análise dos princípios de efeitos especiais da página da web </li>
<li> Responda às ações do usuário </li>
<li> Efeito da caixa imediata </li>
<li> orientado a eventos </li>
<li> Operação de atributo do elemento </li>
</ul>
</li>
<li>
www.vevb.com
<ul>
<li> Mude a cor de fundo da página da web </li>
<li> Função Transferência de parâmetros </li>
<li> Escrita de funções de alta reutilização </li>
<li> 126 Efeito de seleção da caixa de correio </li>
<li> Loop e operações de travessia </li>
</ul>
</li>
<li>
Lição 3
<ul>
<li>
Composição de JavaScript
<ul>
<li> ECMAScript </li>
<li> Dom </li>
<li> Bom </li>
<li> Fontes de compatibilidade com JavaScript </li>
</ul>
</li>
<li> A localização, vantagens e desvantagens do JavaScript </li>
<li> Variáveis, tipos, tipo de conversão de tipo de dados, escopo variável </li>
<li>
Encerramento
<ul>
<li> O que é um fechamento </li>
<li> Aplicação simples </li>
<li> Fechando as desvantagens </li>
</ul>
</li>
<li> Operador </li>
<li> Controle de fluxo do programa </li>
<li>
Uso de temporizadores
<ul>
<li> setInterval </li>
<li> setTimeout </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.