Este artículo describe el método para implementar un menú de clic web totalmente personalizado con directorios de niveles múltiples en JS. Compártelo para su referencia. El análisis específico es el siguiente:
Esta es una muy buena función web del mouse. Este código puede controlar el menú de clic derecho del mouse en la página web, y se crea completamente de acuerdo con sus deseos. Se puede mostrar en múltiples niveles de catálogos.
Copie el código de la siguiente manera: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS Página web personalizada Menú de navegación de niveles múltiples </title>
<style type = "text/css">
html, cuerpo {altura: 100%; desbordamiento: oculto;}
cuerpo, div, ul, li {margen: 0; relleno: 0;}
cuerpo {fuente: 12px/1.5/5fae/8f6f/96c5/9ed1;}
UL {Type de estilo List-Style: Ninguno;}
#rightmenu {posición: absoluto; top: -9999px; izquierda: -9999px;}
#rightmenu ul {float: left; borde: 1px sólido #979797; fondo: #f1f1f1 url (imágenes/line.png) 24px 0 repetición-y; relleno: 2px; box-shadow: 2px 2px 2px rgba (0,0,0, .6);}
#rightmenu ul li {float: izquierda; transparente: ambas; altura: 24px; cursor: puntero; line-aguja: 24px; espacio blanco: nowrap; relleno: 0 30px;}
#rightmenu ul li.sub {Background-Repeat: No-Repeat; Background-Position: Right 9px; Background-Image: URL (Images/Arrow.png);}
#rightmenu ul li.active {fondo de fondo: #f1f3f6; border-radio: 3px; borde: 1px sólido #aecff7; altura: 22px; línea de línea: 22px; posición de fondo: derecha -8px; relleno: 0 29px;}
#rightmenu ul ul {display: none; posición: absoluto;}
</style>
<script type = "text/javaScript">
var gattoffset = {
superior: function (obj) {
regresar obj.offsettop + (obj.offsetparent? Arguments.callee (obj.offsetParent): 0)
},
izquierda: function (obj) {
return obj.offsetleft + (obj.offsetparent? Arguments.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 = "Ninguno";
para (i = 0; i <ali.length; i ++)
{
// Agregue una flecha al Li que contiene el submenú
Ali [i] .getElementsByTagName ("ul") [0] && (ali [i] .classname = "sub");
//Avanzar
Ali [i] .onmouseover = function ()
{
var othis = this;
var oul = othis.getElementsBytagName ("ul");
// mover el mouse a estilo
othis.classname += "activo";
// show submenu
if (oul [0])
{
ClearTimeOut (Hidetimer);
showtimer = setTimeOut (function ()
{
para (i = 0; i <othis.parentnode.children.length; i ++)
{
othis.parentnode.children [i] .getElementsBytagName ("ul") [0] &&
(othis.parentnode.children [i] .getElementsBytagName ("ul") [0] .style.display = "Ninguno");
}
oul [0] .style.display = "bloque";
Oul [0] .style.top = othis.offsettop + "px";
Oul [0] .style.left = othis.offsetWidth + "Px";
setwidth (oul [0]);
// Rango de visualización máximo
maxWidth = ADOC [0] - OUl [0] .OffSetWidth;
maxHeight = Adoc [1] - OUl [0] .Offsetheight;
// Evitar el desbordamiento
maxWidth <getoffset.left (oul [0]) && (oul [0] .style.left = -oul [0] .ClientWidth + "Px");
MaxHeight <getoffset.top (oul [0]) && (oul [0] .style.top = -oul [0] .ClientHeight + othis.offsettop + othis.clientheight + "px")
}, 300);
}
};
// Mouse
Ali [i] .onmouseout = function ()
{
var othis = this;
var oul = othis.getElementsBytagName ("ul");
// estilo de ratón
othis.classname = othis.classname.replace (// s? activo/, "");
ClearTimeOut (showtimer);
Hidetimer = setTimeOut (function ()
{
para (i = 0; i <othis.parentnode.children.length; i ++)
{
othis.parentnode.children [i] .getElementsBytagName ("ul") [0] &&
(othis.parentnode.children [i] .getElementsBytagName ("ul") [0] .style.display = "Ninguno");
}
}, 300);
};
}
// Personalizar el menú de clic derecho
document.onContextMenu = function (evento)
{
VAR Event = Event || Window.event;
omenu.style.display = "bloque";
omenu.style.top = event.clienty + "px";
omenu.style.left = event.clientx + "px";
setwidth (aul [0]);
// Rango de visualización máximo
maxwidth = adoc [0] - omenu.offsetWidth;
maxHeight = adoc [1] - omenu.offsetheight;
// evitar el desbordamiento del menú
omenu.offsettop> maxheight && (omenu.style.top = maxHeight + "px");
omenu.offsetleft> maxwidth && (omenu.style.left = maxwidth + "px");
devolver falso;
};
// Haga clic para ocultar el menú
document.Onclick = function ()
{
omenu.style.display = "Ninguno"
};
// Por favor, el ancho más grande en Li y asignarlo a todos los LI al mismo nivel
función setwidth (obj)
{
maxwidth = 0;
para (i = 0; i <obj.children.length; i ++)
{
var oli = obj.children [i];
var iwidth = oli.clientwidth - parseint (oli.currentstyle? oli.currentstyle ["paddingleft"]: getComputedStyle (Oli, null) ["Paddingleft"]) * 2
if (iwidth> maxwidth) maxwidth = iWidth;
}
para (i = 0; i <obj.children.length; i ++) obj.children [i] .style.width = maxwidth+"px";
}
};
</script>
</ablo>
<Body>
<Centente> Menú personalizado de clic derecho, haga clic con el botón derecho en la página para ver el efecto. </Center>
<div id = "rightMenu">
<ul>
<li> <strong> JavaScript Learning </strong> </li>
<li>
Wulin.com
<ul>
<li> Análisis de principios de efectos especiales de la página web </li>
<li> Responda a las acciones del usuario </li>
<li> Efecto de cuadro de inmediato </li>
<li> Driven de eventos </li>
<li> Operación de atributos de elementos </li>
</ul>
</li>
<li>
www.vevb.com
<ul>
<li> Cambie el color de fondo de la página web </li>
<li> Transferencia de parámetros de función </li>
<li> Escritura de funciones de alta reutilización </li>
<li> 126 Efecto de selección de buzón </li>
<li> Operaciones de bucle y transversal </li>
</ul>
</li>
<li>
Lección 3
<ul>
<li>
Composición de JavaScript
<ul>
<li> Ecmascript </li>
<li> dom </li>
<li> Bom </li>
<li> Fuentes de compatibilidad de JavaScript </li>
</ul>
</li>
<li> La ubicación, las ventajas y las desventajas de JavaScript </li>
<li> Variables, tipos, typeof, conversión de tipos de datos, alcance variable </li>
<li>
Cierre
<ul>
<li> ¿Qué es un cierre </li>
<li> Aplicación simple </li>
<li> Desventajas de cierre </li>
</ul>
</li>
<li> Operador </li>
<li> Control de flujo del programa </li>
<li>
Uso de temporizadores
<ul>
<li> setInterval </li>
<li> setTimeout </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.