Cet article décrit la méthode d'implémentation d'un menu avec un clic droit de page Web entièrement personnalisé avec des répertoires à plusieurs niveaux dans JS. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Il s'agit d'une très bonne fonctionnalité de souris Web. Ce code peut contrôler le menu avec le bouton droit sur la souris dans la page Web et est créé complètement en fonction de vos souhaits. Il peut être affiché à plusieurs niveaux de catalogues.
Copiez le code comme suit: <! 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">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> JS Page Web personnalisée Menu de navigation à plusieurs niveaux </TITME>
<style type = "text / css">
html, corps {hauteur: 100%; débordement: caché;}
corps, div, ul, li {marge: 0; rembourrage: 0;}
corps {police: 12px / 1.5 / 5fae / 8f6f / 96c5 / 9ed1;}
ul {list-style-type: aucun;}
#RightMenu {position: absolu; en haut: -9999px; gauche: -9999px;}
#RightMenu ul {float: gauche; bordure: 1px solide # 979797; arrière-plan: # f1f1f1 URL (images / line.png) 24px 0 répéter-y; padding: 2px; box-shadow: 2px 2px 2px rgba (0,0,0, .6);};
#RightMenu ul li {float: Left; Clear: les deux; hauteur: 24px; curseur: pointeur; height de ligne: 24px; espace blanc: nowrap; padding: 0 30px;}
#RightMenu ul li.sub {background-repeat: no-repeat; background position: droit 9px; image d'arrière-plan: url (images / arrow.png);}
#RightMenu ul li.active {background-color: # f1f3f6; border-radius: 3px; border: 1px solide # aecff7; height: 22px; line-height: 22px; background position: droite -8px; padding: 0 29px;}
#RightMenu Ul ul {affichage: Aucun; Position: Absolute;}
</ style>
<script type = "text / javascript">
var getoffset = {
en haut: fonction (obj) {
return obj.offsettop + (obj.offsetparent? arguments.callee (obj.offsetparent): 0)
},
gauche: fonction (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 = "Aucun";
pour (i = 0; i <ali.length; i ++)
{
// Ajouter une flèche au Li contenant le sous-menu
Ali [i] .getElementsByTAGName ("ul") [0] && (ali [i] .classname = "sub");
// emménager
Ali [i] .onMouseOver = function ()
{
var othis = this;
var oul = othis.getElementsByTagName ("ul");
// déplace la souris dans le style
othis.classname + = "actif";
// montre un sous-menu
if (oul [0])
{
ClearTimeout (Hidetimer);
showtimer = setTimeout (function ()
{
pour (i = 0; i <othis.parentnode.children.length; i ++)
{
othis.parentnode.children [i] .getElementsByTagName ("ul") [0] &&
(othis.parentnode.children [i] .getElementsByTagName ("ul") [0] .style.display = "Aucun");
}
oul [0] .style.display = "bloc";
oul [0] .style.top = othis.offsettop + "px";
oul [0] .style.left = othis.offsetwidth + "px";
SetWidth (oul [0]);
// Plage d'affichage maximale
maxWidth = adoc [0] - oul [0] .offsetWidth;
MaxHeight = adoc [1] - Oul [0] .offSetheight;
// Empêcher le débordement
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);
}
};
// souris
Ali [i] .onMouseout = function ()
{
var othis = this;
var oul = othis.getElementsByTagName ("ul");
// Style de souris
othis.classname = othis.classname.replace (// s? active /, "");
ClearTimeout (Showtimer);
HideTimer = setTimeout (function ()
{
pour (i = 0; i <othis.parentnode.children.length; i ++)
{
othis.parentnode.children [i] .getElementsByTagName ("ul") [0] &&
(othis.parentnode.children [i] .getElementsByTagName ("ul") [0] .style.display = "Aucun");
}
}, 300);
};
}
// Personnalisez le menu de clic droit
document.onContextMenu = fonction (événement)
{
var event = événement || window.event;
omenu.style.display = "bloc";
omenu.style.top = event.clienty + "px";
omenu.style.left = event.clientx + "px";
SetWidth (Aul [0]);
// Plage d'affichage maximale
maxWidth = adoc [0] - omenu.offsetwidth;
MaxHeight = adoc [1] - omenu.offsetheight;
// Empêcher le débordement du menu
omenu.offsetTop> maxHeight && (omenu.style.top = maxHeight + "px");
omenu.offsetleft> maxwidth && (omenu.style.left = maxwidth + "px");
retourne false;
};
// Cliquez pour masquer le menu
document.onclick = function ()
{
omenu.style.display = "Aucun"
};
// s'il vous plaît la plus grande largeur de Li et l'attribuez à tous les LIS au même niveau
fonction SetWidth (OBJ)
{
maxWidth = 0;
pour (i = 0; i <obj.children.length; i ++)
{
var oli = obj.children [i];
var iwidth = oli.clientwidth - parseInt (oli.currentStyle? oli.currentStyle ["Paddingleft"]: getCompuledStyle (oli, null) ["Paddingleft"]) * 2
if (iWidth> maxWidth) maxWidth = iWidth;
}
pour (i = 0; i <obj.children.length; i ++) obj.children [i] .style.width = maxwidth + "px";
}
};
</cript>
</ head>
<body>
Menu sous-cliquez avec le bouton droit personnalisé, veuillez cliquer avec le bouton droit sur la page pour afficher l'effet. </ Center>
<div id = "droiteMenu">
<ul>
<li> <strong> apprentissage JavaScript </strong> </li>
<li>
Wulin.com
<ul>
<li> Analyse de la page Web Principes d'effets spéciaux </li>
<li> Répondre aux actions des utilisateurs </li>
<li> Effet de la boîte d'invite </li>
<li> Axé sur les événements </li>
<li> Fonctionnement de l'attribut d'élément </li>
</ul>
</li>
<li>
www.vevb.com
<ul>
<li> Changer la couleur d'arrière-plan de la page Web </li>
<li> Transfert de paramètres de fonction </li>
<li> Écriture de fonctions de réutilisabilité élevées </li>
<li> 126 Effet de sélection des boîtes aux lettres </li>
<li> Opérations de boucle et de traversée </li>
</ul>
</li>
<li>
Leçon 3
<ul>
<li>
Composition JavaScript
<ul>
<li> Ecmascript </li>
<li> Dom </li>
<li> Bom </li>
<li> Sources de compatibilité JavaScript </li>
</ul>
</li>
<li> L'emplacement, les avantages et les inconvénients de JavaScript </li>
<li> Variables, types, type de conversion de type de données, portée des variables </li>
<li>
Fermeture
<ul>
<li> Qu'est-ce qu'une fermeture </li>
<li> Application simple </li>
<li> Clôture des inconvénients </li>
</ul>
</li>
<li> Opérateur </li>
<li> Contrôle du flux de programme </li>
<li>
Utilisation des minuteries
<ul>
<li> SetInterval </li>
<li> setTimeout </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.